如何在不实际拖放的情况下使用 jQuery UI Droppable 触发 Drop 事件？答案

【问题标题】：How do I trigger the Drop event with jQuery UI Droppable without actually dragging and dropping?如何在不实际拖放的情况下使用 jQuery UI Droppable 触发 Drop 事件？
【发布时间】：2011-03-12 09:57:51
【问题描述】：

我有一个带有 drop 事件处理程序的 droppable：

$(this).droppable({
  drop:function(){
    console.log('OMG You Dropped It!');
  }
});

我有一个可拖动的：

$(this).draggable();

我想要做的是在 droppable 上触发 drop 事件处理程序，而无需实际拖放 draggable。我想模拟实际行为而不实际执行行为。

我认为这样的事情会做：

$(droppable).trigger('drop', [draggable]);

不幸的是，事情没那么简单。有谁知道我如何做到这一点？

【问题讨论】：

stackoverflow.com/a/29284621/…

标签： javascript jquery jquery-ui droppable

【解决方案1】：

您应该将 drop 处理程序中的代码移动到单独的函数中。
然后，您可以在处理程序和其他地方调用该函数。

【讨论】：

以上是简化的示例代码，用于说明我想要完成的工作，而不是代码。无论如何，这将如何解决我的问题？
可以调用函数而不是触发事件。

【解决方案2】：

您可以通过option-method触发与drop call相关的函数：

$("#droppable").droppable({
        drop: function(event, ui) {
            do stuff }
    });
var drop_function = $("#droppable").droppable.option('drop');
drop_function();

这样你就可以得到在 droppable 上放置东西时会发生的任何事情。当然，您可以只执行该功能而不是分配它。尽管如此，为了清楚起见，分配一个要删除的函数是个好主意，您可以在其他地方定义它。

【讨论】：

+1 用于在 QUnit 测试期间能够在原始函数定义范围之外调用（例如）。
新语法是：$("#droppable").droppable('option', 'drop')。
@StuperUser 我不明白。 $("#droppable") 是如何知道哪个元素被拖放到上面的？
在 droppable 的 'drop' 事件处理函数中，被丢弃的元素是：ui.draggable。查看 drop 事件：jqueryui.com/demos/droppable/#event-drop 了解更多详情。
@StuperUser 在函数调用期间如何初始化这两个参数？ drop_function('event','ui-draggable');

【解决方案3】：

正如StuperUser 所指出的并基于ajmurmann 的回答，您应该使用最新版本的jQuery：

$("#droppable").droppable({
    drop: function(event, ui) {
        do stuff }
});
var drop_function = $("#droppable").droppable('option', 'drop');
drop_function();

【讨论】：