jQuery Draggable и переполнение проблема

У меня была аналогичная проблема, позволяющая перетаскивать между двумя div-over-auto div. С помощью предыдущих ответов я обнаружил, что эта комбинация работает для меня (Safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'

appendTo

Элемент, SelectorDefault: 'parent'

Элемент, переданный или выбранный параметром appendTo, будет использоваться в качестве перетаскиваемого вспомогательного контейнера во время перетаскивания. По умолчанию хелпер добавляется в тот же контейнер, что и перетаскиваемый.

Примеры кода Инициализируйте draggable с указанной опцией appendTo.

$('.selector').draggable({ appendTo: 'body' });

Решение клона работает, но имеет две проблемы.

Сначала: клон присоединяется к телу. В зависимости от вашего css ваш элемент может изменять стили, так как до его запуска он внутри другого элемента и во время перетаскивания, он будет непосредственно на элементе body.

Во-вторых: Иногда элемент ДОЛЖЕН двигаться, и клон позволяет этому объекту.

Итак, решение для этих задач:

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

Настройка параметра прокрутки не мешает детям скрываться в области переполнения. Я придумал работу, которая использует вспомогательный вариант. Проверьте это:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

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

jquery ui перетаскиваемые элементы не перетаскиваются за пределы прокрутки div

Вы также можете указать, какие типы элементов вы не хотите включать.

<div class="draggable"> 
    <h2>This will drag the div</h2>
    <ul>
       <li>This won't drag the div</li>
    </ul>
</div>

Применить свойство cancel, чтобы игнорировать событие в указанных дочерних элементах

$('.draggable').draggable({cancel : 'ul'});