JQuery Dragging Outside Parent

Question

I'm using JQuery's draggable(); to make li elements draggable. The only problem is when the element is dragged outside its parent, it doesn't show up. That is, it doesn't leave the confines of its parent div. An example is here: http://imgur.com/N2N1L.png - it's as if the z-index for everything else has greater priority (and the element slides under everything).

Here's the code:

$('.photoList li').draggable({ 
        distance: 20,
        snap: theVoteBar,
        revert: true,
        containment: 'document'
    });

And the li elements are placed in DIVs like this:

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
            <h2 class="title" style="display:none;">Page 1</h2>
            <ul class="photoList">
                <li>
                    <img class="ui-widget-content" src="photos/1.jpg" style="width:100px;height:100px;" />
                </li>
            </ul>
        </div>
    </div>

I'm positive the problem is it won't leave its parent container, but I'm not sure what to do to get it out.

Any direction or help would be appreciated GREATLY!

Answer 1

I landed on this page with the exact same problem, and Brendan's answer got me close. Setting the appendTo option didn't help, but I was able to resolve my issue by adding overflow: visible to the parent of my draggable element. Turns out I was sloppily inheriting hidden from somewhere up the chain.

Side note, it looks like this works because jQuery UI moves the draggable element by dynamically setting positioning relative to the parent - this was new intel for me!

Answer 2

I had also the same problem.
You can use this option

containment: $('#divmain')
helper: 'clone'

respectively for
- define limit area for dropping action
- for shows visible dragged object also outside div parent but inside #divmain

example

<div id="divmain">
  <div id="divparentdraggable">
    <div id="divdraggable"></div>
  </div>
  <div id="divparentdroppable">
    <div id="divdroppable"></div>
  </div>
</div>

jquery code:

$('divparentdraggable').draggable({ 
...
containment: $('#divmain'),
helper: 'clone',
...
});

I hope this help someone.

Answer 3

Looks like a combination of some of the above did it for me.

Set appendTo: 'body' and helper: 'clone'. This way a new DOM-Object will be created as child of the body which will be visible everywhere. This way you can drag (and drop) it everywhere you like.

Answer 4

This looks like a css issue. Try turning off the revert so it stays put when you drag it to where it is half visible. Then play with the z-index etc in Firebug and see if you can get it showing. It might be a css issue with one of the parent ul or div's with 'overflow: hidden'.