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事件相关联的函数。

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

问题是如何在不使用实际可拖动的情况下触发相同的进程...或者至少不使用掉在顶部的可拖动（例如通过单击第3个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');
});

现在可以通过删除第二个DIV或单击第三个DIV来触发DROP功能。使用以下方法手动触发：

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

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

这是jsFiddle

使用jQuery droppables触发drop事件

1 个答案: