6

I have a simple UL in a div with the overflow set to automatic and a fixed height. Each LI is draggable via jQuery. Problem is that I cannot drag them from the div (they disappear when dragged to the boundaries).

I have looked at this question and its answers, but the solution here does not seem to work for me (setting the scroll option): jQuery Draggable and overflow issue

Thanks

Community
  • 1
  • 1
Sergio
  • 9,761
  • 16
  • 60
  • 88

3 Answers3

16

I got around this by using a helper method to append the item to the body (so its outside the div)

$("#myitem").draggable({
helper: function() { return $(this).clone().appendTo('body').show(); }
});

Not sure if you need the show() and I also had to raise the z-index but it depends on the rest of your page.

Phil

Phil
  • 4,012
  • 5
  • 39
  • 57
  • perfect. I did originally try the appendTo: 'body' option, which I would have thought would have the same effect, but didnt! – Sergio Nov 30 '09 at 14:21
  • Glad to help, took me hours to figure this out too :) – Phil Nov 30 '09 at 17:21
7

I was able to achieve the same results with

appendTo: 'body',
helper: 'clone'
Chris Wininger
  • 101
  • 1
  • 1
0

I had simillar problem , where if once drags the component below out of the boundry of the page, it disappears.

to fixit I use the stop event of the draggable plugin, in the 

$('.dragableComp').draggable({
   stop:function(){
        //here write the code for adjusting the top and left of your component
   },..
});
Lalit
  • 91
  • 1
  • 1
  • 7