使用 jQuery droppables 触发 drop 事件

Question

有人问过这个问题的变体，但答案都是不同的，有些过时了，而且对我不起作用，所以我希望这是我缺少的 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）？

Answer 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