jQuery Draggable containment issue, cannot drag elements outside parent div

Question

I have a very simple image manager, like so:

<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>

And jQuery to go with it:

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

And this is the CSS:

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

.images {
    z-index:10000;
}

Images are draggable, but they won't come out of their parent div, no matter what the containment is set to (even tried to set it to window).

Does anyone know how to make it work, or why it doesn't work?

I've set z-index high to make sure that's not the issue. I also tried making #draggable-images div without scrollbar, it didn't work either.

Seems to work like a charm on jQuery's site, can't figure what I'm missing.

score 10 · Answer 1 · answered Dec 20 '12 at 22:40

10

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

answered Dec 20 '12 at 22:40

printminion

2,988
1
26
30

This should be the answer. Having scrollbars on the parent div might be a design need and shouldn't be considered the first option to solve the problem. – Dorival Jun 17 '15 at 14:52
I don't think this correct as of now. [jquery docs](http://api.jqueryui.com/draggable/#option-appendTo) advise that *"The appendTo option only works when the helper option is set to not use the original element."*. There is no clone in this case. – maxheld Jun 13 '17 at 21:08
1

This works fine with `clone` helper and also with knockoutjs contexts for dropped item. Note that style of clone *might* be different than that of original element. – PeterM Feb 27 '18 at 19:30

score 1 · Answer 2 · edited Oct 01 '13 at 09:32

1

Remove overflow-x:hidden from #draggable-images. I too faced similar problem.

edited Oct 01 '13 at 09:32

laalto

150,114
66
286
303

answered Oct 01 '13 at 09:15

K K

17,794
4
30
39

score 0 · Answer 3 · answered Mar 08 '12 at 00:00

0

check your HTML, something's wrong with it
remove the overflow styles of the parent
z-index? needed?

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

answered Mar 08 '12 at 00:00

Joseph

117,725
30
181
234

Thanks. But I need parent div to have scrollbar - or is that simply not possible? – CodeVirtuoso Mar 08 '12 at 00:16
1

scrollbars means that you have a constrained container (defined width and height, overflow scroll) which means that whatever is in the box that exceeds, scroll is activated (and the contents cannot escape the parent). one work around is that when you start to scroll, you take the element out of the container while dragging. – Joseph Mar 08 '12 at 00:35

jQuery Draggable containment issue, cannot drag elements outside parent div

3 Answers3