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

拖动工作正常,将其拖动到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