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

Question

У меня очень простой менеджер изображений, вот так:

<div id="container">

    <div id="draggable-images">
        <img class="images" src="image1.jpg" />
        <img class="images" src="image2.jpg" />
        <img class="images" src="image3.jpg" />
    </div>

    <div id="droppable-area>
    </div>

</div>

И jQuery, чтобы пойти с ним:

        $( ".images" ).draggable({ containment: "#container" });
        $( "#droppable-area" ).droppable();

А это CSS:

#draggable-images {
    overflow:scroll;
    overflow-x:hidden;
}

.images {
    z-index:10000;
}

Изображения можно перетаскивать, но они не будут выходить из родительского элемента div, независимо от того, какое значение установлено для содержимого (даже пыталось установить его в окно).

Кто-нибудь знает, как заставить его работать или почему он не работает?

Я установил высокий z-index, чтобы убедиться, что это не проблема. Я также попытался сделать #draggable-images div без полосы прокрутки, это тоже не сработало.

Кажется, работает как шарм на сайте jQuery , не могу понять, что мне не хватает.

Answer 1

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

Answer 2

Удалить overflow-x:hidden из #draggable-images. Я тоже сталкивался с подобной проблемой.

Answer 3

• проверь свой HTML, с ним что-то не так
• удалить стили переполнения родительского
• г-индекс? необходимо

http://jsfiddle.net/LRj9T/1/