jquery sortable cannot be dragged outside of accordion

Question

I have 2 connected sortable lists. One is inside an accordion. When I try to drag items from the sortable in the accordion, the helper disappears as soon as I get outside of t

Answer 1

I'm a little late, I know, but I had a similar problem with two sortable accordions where you can drag&drop items between the two accordions.

So, for future reference:

I also couldn't get the accordion-items to "go out" of the source-accordion, and google led me to this question.

I solved my problem by adding axis: undefined on the sortable() function:

        $("#accordion1")
        .accordion({
            collapsible: true,
            header: "> div > h3",
            dropOnEmpty: true,
            autoHeight: false,
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop1 = true;
            },
            connectWith: '.connectedSortable',
            helper: 'clone',
            axis: undefined
        });

Now the accordion-items can be dragged all over the place.

Answer 2

In your sortable call you want to use the following options:

helper: "clone", appendTo: "body", // or whatever element you want the helper clone to be attached to

This does two things. First it makes a copy of the element being dragged (helper option), second it attaches that helper to the specified element (appendTo option).

Similar question here: jQuery-Ui: Cannot drag object outside of an accordion

Answer 3

paste a sample of your code so we know what you have left out... it seems that while you are on mouse down... then your accordion fires an event... i could be wrong but sounds like it... so try and have a look at propagation and stopPropagation on jquery.