Adding Droppables While Dragging Draggable

Question

The desired behavior:

The user drags an item onto a tree. Upon hovering over a closed node, the node expands revealing the children. At this point the user can continue dragging to the child nodes and drop on any of them.

This was working fine. I use the "over" option of the droppables to expand the node and make the children droppable.

But I needed to add some more features. First I added a helper for draggables. Still working fine. Then I put the draggables and droppables into two different containers (divs). At this point, the helper would not drag out of the container. The solution was to set "appendTo: 'body'" on the draggables. All good...well, not quite.

Now the child nodes are not droppable during the current drag operation. The user must release the current drag and redrag into the desired child node. If I remove the appendTo option, the problem goes away, but then the helper does not visually move into the droppable container.

Is there some way that I can "wake up" these new droppables to make them immediately droppable?

Answer 1

This is how I got almost same problem solved. In my case when I toggle the node open during dragging a draggable, child items 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 makes the draggable have refreshPositions option as true long enough for the new droppables to join the current drag. You can also have the refreshPositions option be true during the whole drag, but it gives a performance penalty which I don't want.

I didn't find a way to do it in another way. It would be best if there was a method you could call during the drag just for refreshing the positions, but there isn't.