使用 jQuery droppables 触发 drop 事件

Posted 2023-05-08

【中文标题】使用 jQuery droppables 触发 drop 事件

【英文标题】：Triggering a drop event with jQuery droppables

【发布时间】：2014-02-11 22:27:11

【问题描述】：

有人问过这个问题的变体，但答案都是不同的，有些过时了，而且对我不起作用，所以我希望这是我缺少的 jQuery 中更改的语法规则的问题。

场景 html：

<div id="theDroppable">Droppable</div>
<div id="theDraggable">Draggable</div>
<div id="theTrigger">Click to trigger a drop</div>

jQuery：

$( "#theDroppable" )
    .droppable(
      drop: function( event, ui ) 
          alert('dropped');
      
    );

$( "#theDraggable" ).draggable();

$( "#theTrigger" ).click(function()$( "#theDroppable" ).trigger('drop'));

小提琴：http://jsfiddle.net/7Bewj/

上面创建了一个 Droppable、一个 Draggable 和一个 div，我想用它们以某种方式触发与 droppable 上的 drop 事件关联的函数。

draggable 工作正常，将其拖动到 droppable 并释放会触发警报。

问题是如何在不使用实际可拖动对象的情况下触发相同的过程......或者至少不使用放在顶部的可拖动对象（例如通过单击第三个 div）？

【问题讨论】：

***.com/a/29284621/…

【参考方案1】：

从函数中可以看出：

drop: function( event, ui ) 
      alert('dropped');
  

如果您在声明 droppable 期间定义了诸如 DROP 之类的方法，那么只有在将 DOM 元素（UI 对象）拖放到它们上时才会调用它们，因此您无法触发这些函数。

如果您需要触发 DROP，那么我建议您将该事件绑定到 droppable 为：

$( "#theDroppable" ).droppable(hoverClass : 'droppableStyle');
$( "#theDroppable" ).on('drop',function(event,ui)
    alert('dropped');
);

现在可以通过删除 2nd DIV 或单击 3rd DIV 来触发 DROP 功能，就像您的情况一样。使用手动触发它：

 $( "#theDroppable" ).trigger('drop');

注意：如果手动触发，参数“ui”将是未定义的，否则当可拖动对象被拖放到其上时，它将包含 UI 对象。

这里是jsFiddle

【讨论】：

谢谢你！我已经看过很多 trigger('drop') 语法，但永远无法让它工作。显然，如果它绑定到 droppable 而不是设置为参数，则只能触发 drop 事件？

@DA。是的，如果它被设置为参数，那么它需要 UI 对象，因此您需要删除 DOM 元素才能调用此类函数。从这个api.jquery.com/trigger 可以清楚地看出，只有在使用.on 方法绑定时才能触发事件。