拖动 Draggable 时添加 Droppable

Question

期望的行为：

用户将一个项目拖到树上。将鼠标悬停在关闭的节点上时，该节点会展开以显示子节点。此时，用户可以继续拖动到子节点并将其放在其中的任何一个上。

这工作得很好。我使用 droppables 的“over”选项来展开节点并使子节点可放置。

但我需要添加更多功能。首先，我添加了一个可拖动的助手。仍然工作正常。然后我将可拖动对象和可放置对象放入两个不同的容器（div）中。此时，助手就不会被拖出容器了。解决方案是在可拖动对象上设置“appendTo: 'body'”。一切都很好……好吧，不完全是。

现在，在当前拖动操作期间，子节点不可被放置。用户必须释放当前的拖动并重新拖动到所需的子节点。如果我删除appendTo选项，问题就会消失，但助手不会在视觉上移动到可放置容器中。

有什么方法可以“唤醒”这些新的可放置物品，使它们立即可放置吗？

Answer 1

这就是我解决几乎相同问题的方法。就我而言，当我在拖动可拖动对象期间打开节点时，子项目将通过 ajax 加载，然后将它们初始化为可放置对象。然后我必须这样做：

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);

这使得可拖动的 refreshPositions 选项设置为 true 足够长的时间，以便新的可放置项加入当前的拖动。您还可以在整个拖动过程中将 refreshPositions 选项设置为 true，但它会带来我不希望的性能损失。

我没有找到用另一种方式做到这一点的方法。如果有一个方法可以在拖动期间调用以刷新位置，那就最好了，但没有。