[ACCEPTED]-jQuery Draggable and overflow issue-drag-and-drop

Accepted answer

Score: 110

I had a similar problem enabling a drag 3 between two overflow-auto divs. With the 2 help of the previous answers, I found that 1 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'

Score: 56

appendTo

Element, SelectorDefault:'parent'

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

Code examples Initialize 1 a draggable with the appendTo option specified.

$('.selector').draggable({ appendTo: 'body' });

Score: 38

It certainly pays to pay attention to the 3 documentation

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

scroll

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

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

Score: 20

The clone solution it works, but has two 8 problems.

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

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

So, the solution for this 1 problems is:

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

Score: 2

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

http://pastebin.me/164f0a4073496563fe3179ddcec5fd6d

Also 1 here is a reference to another post I made:

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

Source: stackoverflow.com

[ACCEPTED]-jQuery Draggable and overflow issue-drag-and-drop

scroll

Drag and drop table row from one tabs table to another tabs table - Jquery

How do I highlight a droppable area on hover using jquery ui draggable

Prevent drop of list item in JqueryUI sortable

WPF 4 Drag and Drop with visual element as cursor

QTreeView with drag and drop support in PyQt

Twitter Bootstrap Modal Form: How to drag and drop?

Why my WPF application has Drag & Drop disabled (even when AllowDrop is true)?

How can I create a drag and drop action in React native?

C# Drag and Drop attached file from outlook email

jQuery drag and drop - how to get at element being dragged