Adding Droppables when dragging Draggable

Question

Desired behavior:

The user drags an item onto the tree. When falling over a closed node, the node expands showing children. At this point, the user can continue to drag and drop to the child nodes and delete any of them.

This worked fine. I use the "over" option for dropdowns to expand the node and make the child elements inaccessible.

But I needed to add some more functions. First I added a drag and drop helper. Still working fine. Then I put the dragged and unpacked into two different containers (divs). At this moment, the assistant did not pull out of the container. The solution was to set appendTo: body to the objects being dragged. All is well ... well, not really.

Now the child nodes will not be available during the current drag and drop operation. The user must let go of the current drag and redraw to the desired child node. If I remove the appendTo parameter, the problem will disappear, but then the assistant will not visually move to the replaceable container.

Is there any way I can wake up these new droppables to cancel them immediately?

Answer 1

This is how I solved almost the same problem. In my case, when I switch node when dragging and dropping, the children are loaded via ajax and then they are initialized as droppables. Then I have to do this:

ui.draggable.draggable('option', 'refreshPositions', true);
var tempFunc = function() {
    if (ui.draggable) {
        ui.draggable.off('drag', tempFunc);
        setTimeout(function() {
            ui.draggable.draggable('option', 'refreshPositions', false);
        }, 100);
    }
};
ui.draggable.on('drag', tempFunc);

This causes draggable to have the parameter refreshPositionsas truelong enough so that new droppables join the current drag. You can also have a parameter refreshPositions trueduring the whole drag and drop, but this gives a performance penalty that I don't want.

-. , , , .