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

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.

Thanks, Phill

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

It certainly pays to pay attention to the documentation

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

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

Answer 3

found this one : http://layout.jquery-dev.net/tips.html#Widget%5FDraggable

Answer 4

Phil, i'm having the exact problem you described.

no matter how many times i go through the documentation, i can't find the solution.

if you wouldn't mind posting what you found to solve your problem, then i might be able to use it to solve many.

here is my code

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
});     

thank you,

seth

Answer 5

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:

http://stackoverflow.com/questions/2098387/jquery-ui-draggable-elements-not-draggable-outside-of-scrolling-div/2099100#2099100