Search code examples
jquery-uijquery-ui-draggablejquery-layout

Jqueryui draggable between Jquery layout sections

here's a jsfiddle of what I'm trying to do

http://jsfiddle.net/YSBGu/

           $( ".dragcomp" ).draggable({
                cursorAt: {
                    left: 0
                },
                zIndex: 300,
                revert: "invalid",
                helper: "clone",
                distance: 10

            });

You'll notice that when trying to drag the divs in the left column to the middle section it stays trapped in the left one and just scrolls it. Is someone able to help me solve this issue?

Solution

  • You can specify the appendTo option to reparent the helper element under an ancestor of your pane structure (for instance the <body> element itself):

    $(".dragcomp").draggable({
    appendTo: "body",
    cursorAt: {
        left: 0
    },
    zIndex: 300,
    revert: "invalid",
    helper: "clone",
    distance: 10
});

    You will find an updated fiddle here.