以编程方式在 droppable 上放置可拖动并触发放置

Question

就像在我的小提琴http://jsfiddle.net/meridius/95Wej/ 中一样，我有一些元素（可拖动），我想以编程方式（仅通过代码，无需用户交互）移动到它们相应的可放置对象。这是我能做到的。

我不知道为什么 .droppable("drop") 事件没有触发。
我需要 droppable 来注册它具有可拖动性。否则（在我更复杂的设置）当用户移动该可拖动对象时会出现一些奇怪的行为。

我尝试.trigger("mousemove"), mousedown，在.position() 之后重新初始化.droppable()，但这些都没有帮助。

编辑：
“奇怪”的行为是由维护 position:relative; 引起的，我通过在调用 .position() 之前将其设置为绝对来解决这个问题。
然而，关于为什么事件没有被触发的问题仍然存在。

Answer 1

droppables 上的 drop 事件处理程序有点奇怪。如果您使用 drop 事件的事件处理程序初始化 droppable，如下所示：

$('div.droppable').droppable({drop: dropFn});

那么dropFn 是唯一在将元素放在droppable 上时调用的函数，而您不能仅使用.trigger 方法调用它。相反，您需要做的是初始化 droppable 而不使用 drop 函数的事件处理程序，然后稍后为 drop 事件绑定事件处理程序，如下所示：

$('div.droppable').droppable().on('drop', dropFn);

用户发起的放置不会受到影响，但现在您可以在代码中触发放置事件。当您执行此操作时，您必须为 here 描述的 ui 对象提供替代品，如下所示：

$('div.droppable').first().trigger('drop', {draggable: ..., helper: ...});

我通过将droppable 的位置设置为“相对”来实现将draggable 移动到droppable，动态地（使用对.css 的调用）将draggable 上的以下CSS 设置为以下：

div.draggable {
    position: absolute;
    left:     0;
    top:      0;
}

然后将draggable 分离并附加到droppable：

$('div.draggable').first().detach().appendTo($('div.droppable').first());

这个答案帮助了我：https://stackoverflow.com/a/21279352/1852838。

在我的示例中，我总是使用第一个 draggable 或 droppable，但您应该能够轻松地将其调整为您的特定应用程序。

Answer 2

它不会触发，因为您没有在其中放置元素。您正在使用 jquery 的 .position 函数将可拖动对象移动到可放置对象中。所以你的目标是使用移动函数的回调。

$(this).position({
  of: "." + $(this).data("target")
}, function(){
  //do some stuff
});

因为您在 .each 循环中，所以这个回调函数会被多次触发。