18

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: https://i.stack.imgur.com/jo6tC.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!

5 Answers 5

21

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!

3
  • Came here looking for the solution... curiously appendTo worked for me! Jun 7, 2017 at 14:37
  • Can you please post some sample code are the link of jsfiddle etc.? Jan 22, 2018 at 4:56
  • Hi Amit, Look at my jsfiddle jsfiddle.net/rahulvaradkar/w8dsz5qk Look at line number #1 as <div id="Table_Tree" title="BCP Explorer" style="display:none;overflow: visible"> Change "overflow: scroll" OR "overflow: hidden" and try Dragging the "Boardwalk Farm". You will get the difference. Mar 17, 2018 at 16:15
13

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.

2
  • The helper: 'clone' option is extremely useful, as I have a ul that must retain overflow: scroll;. Thanks!
    – ljs
    Mar 7, 2013 at 15:12
  • Had the same issue and this worked like a charm, thank you. Sep 27, 2023 at 6:33
11

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.

0
3

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

2

I had a similar issue and resolved it by setting the option:

appendTo: 'body'

The only side effect to this is if you have styles applied to the item based on it's parent container, those styles won't be present on the helper.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.