jquery - 以编程方式将可拖放对象拖放到可拖放对象上并触发放置

就像在小提琴http://jsfiddle.net/meridius/95Wej/中一样，我有一些要通过编程（仅通过代码，无需用户交互）移动到其对应的droppable的元素（可拖动对象）。我能做的

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

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

编辑：
“奇怪”行为是由维护position:relative;引起的，我通过在调用.position()之前将其设置为绝对值来解决。
尽管如此，关于为何不触发事件的问题仍然存在。

最佳答案

droppable上的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: ...});

通过将draggable的位置设置为“相对”，动态地（使用对droppable的调用）将droppable上的以下CSS设置为以下内容，可以将.css移至draggable：

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，但是您应该能够轻松地将其调整为特定的应用程序。

关于jquery - 以编程方式将可拖放对象拖放到可拖放对象上并触发放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19770067/