jQuery Draggable and overflow issue

Question

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

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.

Please [don't add signatures or taglines to your posts](http://stackoverflow.com/faq#signatures). — user229044, Nov 18 '11 at 15:16

score 111 · Answer 1 · edited Jun 18 '15 at 23:55

111

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'

edited Jun 18 '15 at 23:55

Michael Myers

188,989
46
291
292

answered Dec 29 '10 at 00:48

marks_

1,218
2
8
4

score 56 · Answer 2 · answered May 01 '09 at 11:57

56

appendTo

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' });

answered May 01 '09 at 11:57

Chad Grant

44,326
9
65
80

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 04 '09 at 17:22
3

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 04 '09 at 20:25
1

No worries, I appreciate your effort! :) – Phill Duffy May 05 '09 at 09:22
Yea, you just saved hours and my humiliation asking the local hot shot! – Brian Seim at EvoDynamic Inc Jul 08 '11 at 02:24
1

@EvoD -- chances are the local hotshot just gets his info here anyway. – Thomas Dignan Feb 21 '13 at 00:58
1

Local hotshot here, I can confirm that I get all of my information from StackOverflow. – rmlan Mar 05 '13 at 15:51

score 38 · Accepted Answer · edited Jun 20 '20 at 09:12

38

It certainly pays to pay attention to the documentation

http://docs.jquery.com/UI/Draggable#option-scroll

scroll

Type: Boolean
Default: true
If set to true, container auto-scrolls while dragging.

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 06 '09 at 11:22

Phill Duffy

2,805
3
33
45

4

wasted 2 hours indeed. We should really RTFM – Herr Sep 07 '11 at 13:02
I had a similar problem with a accordion. I had a draggable inside an accordion panel and wanted to drag it outside the accordion, but the accordion panel had 'overflow' set to 'auto' and I never managed to get outside the accordion. Setting "scroll: false" on the accordion didn´t help. In the end I overruled the overflow set in jquery-ui. This make the height of my content panel look strange, so I had to had wire a given height. And that worked. – Asle G Feb 20 '16 at 19:40

score 20 · Answer 4 · answered Sep 01 '11 at 05:31

20

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:

$('.selector').draggable({
    helper: 'clone',
    start: function(){
        $(this).hide();             
    },
    stop: function(){
        $(this).show()
    }
});

answered Sep 01 '11 at 05:31

Bruno Guaitanele

201
2
2

1

Perfect! And thanks for the hint about the css - helped me to solve both issues. – mattanja Sep 01 '12 at 21:12
1

To really mimic Draggable's 'original' behavior, you'd prefer to use the CSS property "visibility" – mexique1 Oct 13 '12 at 12:36

score 2 · Answer 5 · edited May 23 '17 at 11:55

2

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:

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

Also here is a reference to another post I made:

jquery ui draggable elements not 'draggable' outside of scrolling div

edited May 23 '17 at 11:55

Community

1
1

answered Jan 22 '10 at 03:20

Justin Bull

7,785
6
26
30

score -1 · Answer 6 · answered Feb 04 '13 at 20:56

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

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

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

$('.draggable').draggable({cancel : 'ul'});

jQuery Draggable and overflow issue

6 Answers6

scroll

Linked