jQuery draggable scrollable container

Question

В настоящее время у меня есть простой перетаскиваемый список, который я хочу находиться внутри div (элементов) и прокручивается.

$(".draggable").draggable(); 

В настоящее время я эта скрипка: http://jsfiddle.net/YvJhE/660/

Но, как вы можете видеть, перетаскивать элементы остаются внутри контейнера элементов, я хочу, чтобы иметь возможность вытаскивать, но и возможность прокрутки внутри контейнер элементов, как только будет больше элементов, чем контейнер длинный.

Может ли кто-нибудь получить меня на правильном пути?

Answer 1

На самом деле это хороший вопрос, поскольку он показывает, как JQuery обрабатывает перетаскиваемые элементы. Ваши перетаскиваемые элементы нельзя перетаскивать за пределы родительских «элементов» div, потому что они представляют собой ограничение для них.

Таким образом, вы можете отказаться от использования элементов-элементов родительского элемента, тогда вы можете перетащить их туда, где хотите.

Или вы можете сделать родительский элемент более крупным, используя ширину и высоту со 100%.

Если вы используете Draggable внутри контейнера начальной загрузки, вы заметите, что их можно перетащить до границ контейнера, но никогда не за его пределами.

Вы также можете попытаться поместить перемещаемые элементы вне родительского элемента с абсолютным положением.

CSS:

.draggable{ 
    width: 60px; 
    z-index: 15; 
    margin: 0 auto; 
    position: absolute; 
} 

#elements{ 
     overflow: scroll; 
     position:absolute; 
     left:20px; 
     width:100%; 
     height:100%; 
     background:#fff; 
     border:1px solid #000; 
     z-index:5; 
     padding:10px; 
     font-size: 10px; 
} 

Html:

<div id="elements"/> 

<div id="" class="draggable ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

Answer 2

JQuery обрабатывает взаимодействия, как это с вспомогательным объектом, который можно добавить запись к другому DOM элемента:

$(".draggable").draggable({ 
    helper: 'clone', 
    appendTo: '#outer' 
}); 

Тогда вы можете где-то есть:

$('#dropspace').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     window.alert('Element dropped at left: ' + ui.position.left + '; top: ' + ui.position.top); 
    } 
}); 

Доказательство концепции: http://jsfiddle.net/YvJhE/662/

Вам все еще нужно перенести фактический элемент DOM, где она была сброшена, или воссоздать его в зависимости от того, что вы собираетесь использовать его для.

Answer 3

Опция helper: 'clone' делает клон данного пункта вы тащите автоматически, так что она может быть втянута из контейнера:

jQuery(".draggable").draggable({ 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body' 
});