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

Posted 2023-05-08

【中文标题】如何在不实际拖放的情况下使用 jQuery UI Droppable 触发 Drop 事件？

【英文标题】：How do I trigger the Drop event with jQuery UI Droppable without actually dragging and dropping?

【发布时间】：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]);

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

【问题讨论】：

***.com/a/29284621/…

【参考方案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();