以编程方式在droppable上删除draggable并触发drop

Question

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

我不知道为什么.droppable（“drop”）事件没有开火 我需要droppable来注册它已经可以拖动。否则（在我更复杂的设置中）当用户移动可拖动时会出现一些奇怪的行为。

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

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

Answer 1

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

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

然后dropFn是唯一一个在droppable上删除元素时被调用的函数，而您无法仅使用.trigger方法调用它。相反，您需要做的是在没有drop函数的事件处理程序的情况下初始化droppable，然后再绑定 drop 事件的事件处理程序，如下所示：

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

用户启动的丢弃不会受到影响，但现在您可以在代码中触发drop事件。执行此操作时，您必须替换ui描述的$('div.droppable').first().trigger('drop', {draggable: ..., helper: ...}); 对象，如下所示：

draggable

我通过将droppable的位置设置为“相对”，动态地（使用对droppable的调用）设置以下内容，将.css移动到draggable div.draggable { position: absolute; left: 0; top: 0; } 上的CSS到以下内容：

draggable

然后分离并将droppable附加到$('div.draggable').first().detach().appendTo($('div.droppable').first()); ：

draggable

这个答案对我有帮助：here。

在我的示例中，我总是使用第一个droppable或{{1}}，但您应该可以轻松地根据您的具体应用进行调整。

Answer 2

它没有射击，因为你不是在那里掉落和元素。您正在使用jquery的.position函数将可拖动的内容移动到dropable中。所以你的目标是使用移动函数的回调。

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

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