Take the 2-minute tour ×

I am having an undesired effect when I drag a div from a container div which is set as overflow: scroll.

I have found an example of someone else where they have had the issue but I have been unable to find a resolution

Example on Paste bin

What happens is that the scroll is just increased, I can see why this would be the desired behaviour if you wanted to drag to a destination within the scrollable div but I want to be able to take it outside of its scrolling grasp.

share|improve this question
Please don't add signatures or taglines to your posts. –  meagar Nov 18 '11 at 15:16
add comment

6 Answers


Element, SelectorDefault:'parent'

The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.

Code examples Initialize a draggable with the appendTo option specified.

$('.selector').draggable({ appendTo: 'body' });
share|improve this answer
I tried to do as you suggest but it is not changing it to the desired behaviour, when you add the code you mentioned into the example on the Paste bin page, does it work for you? Thanks –  Phill Duffy May 4 '09 at 17:22
yeah, I totally fail on this question. I played with it for an hour. The best I can get is how I left it, draggable doesn't work with overflow :( –  Chad Grant May 4 '09 at 20:25
No worries, I appreciate your effort! :) –  Phill Duffy May 5 '09 at 9:22
+1 This actually worked for me. –  Tamas Czinege May 7 '10 at 9:48
@EvoD -- chances are the local hotshot just gets his info here anyway. –  Tom Dignan Feb 21 '13 at 0:58
show 3 more comments

i had a similar problem enabling a drag between two overflow-auto divs. with the help of the previous answers i found that this combination works for me (safari 5.0.3, jquery-1.4.4, jquery-ui-1.8.7):

appendTo: 'body',
containment: 'window',
scroll: false,
helper: 'clone'


share|improve this answer
for me even just helper: 'clone' alone solved the issue –  max4ever Jun 10 '11 at 15:21
year the helper worked for me too (on its own) –  Stevanicus Jan 11 '12 at 8:44
Booya, I'm dragging. –  Itumac Apr 5 '12 at 12:00
@max4ever, if I include only helper:clone, it works, one of the others is messing it up! thanks for the comment. –  Tom Dignan Feb 21 '13 at 1:07
add comment
up vote 19 down vote accepted

It certainly pays to pay attention to the documentation


All who enter here, learn from my mistake, RT(F)M!!!

share|improve this answer
wasted 2 hours indeed. We should really RTFM –  Herr K Sep 7 '11 at 13:02
add comment

The clone solution it works, but has two problems.

First: the clone are append to the body. Depending of your css, your element can change the styles, since before it starts, it's inside of another element and during the dragging, it will be directly on body element.

Second: Sometimes the element MUST move, and the clone let the object there.

So, the solution for this problems is:

    helper: 'clone',
    start: function(){
    stop: function(){
share|improve this answer
Perfect! And thanks for the hint about the css - helped me to solve both issues. –  mattanja Sep 1 '12 at 21:12
To really mimic Draggable's 'original' behavior, you'd prefer to use the CSS property "visibility" –  mexique1 Oct 13 '12 at 12:36
Simply AWESOME! –  RobertH Feb 23 '13 at 22:03
add comment

Setting the scroll option does not stop children from being hidden in the overflow area. I have come up with a work-a-round that uses the helper option. Check it out:


Also here is a reference to another post I made:


share|improve this answer
add comment

You can also specify which types of elements you don't want to include.

<div class="draggable"> 
    <h2>This will drag the div</h2>
       <li>This won't drag the div</li>

Apply this cancel property to ignore the event in specified child elements

$('.draggable').draggable({cancel : 'ul'});
share|improve this answer
add comment

Your Answer


