jquery - 使用 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')});

fiddle :http://jsfiddle.net/7Bewj/

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

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

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

Answer 1

从函数中可以看出:

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

如果您在声明 droppable 期间定义了 DROP 等方法，那么仅当 DOM 元素(UI 对象)放置在其上时才会调用它们，因此您无法触发这些函数。

如果您需要触发 DROP，那么我建议您将该事件绑定(bind)到可删除对象:

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

现在可以通过删除第二个 DIV 或单击第三个 DIV(如您的情况)来触发 DROP 功能。使用以下命令手动触发它:

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

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

这里是jsFiddle