jQuery Draggable and overflow issue [closed]

Answer 1

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

Answer 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

Answer 3

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

Answer 4

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

Answer 5

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'

Answer 6

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!!!