使用jQuery droppables触发放置事件 [英] Triggering a drop event with jQuery droppables

问题描述

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

Variations of this question have been asked, but the answers are all different, somewhat dated, and aren't working for me so I'm hoping it's a matter of changed syntax rules in jQuery that I'm missing.

场景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事件相关联的功能.

The above creates a Droppable, a Draggable, and a div that I'd like to use to somehow trigger the function associated with the drop event on the droppable.

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

The draggable works fine, dragging it to the droppable and releasing triggers the alert.

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

The question is how can I trigger that same process without using an actual draggable...or at least without using a draggable that is dropped on top (such as by clicking the 3rd div)?

推荐答案

从函数中可以看到:

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

如果在声明droppable的过程中定义了DROP之类的方法，则仅当将DOM元素(UI对象)放置在它们上时才调用它们，因此您无法触发这些函数.

If you define methods such as DROP during the declaration of droppable then they are called only when a DOM element(UI object) is dropped on them hence you can't trigger those function.

如果您需要触发DROP，那么我建议您将该事件绑定到可放置对象，如下所示:

If you need to trigger DROP then I would suggest you to bind that event to the droppable as:

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

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

The DROP function can now be triggered by dropping 2nd DIV or by clicking 3rd DIV as in your case. Trigger it manually using:

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

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

NOTE: The argument 'ui' will be undefined if triggered manually, else it will contain the UI object when draggable is dropped on it.

这里是 jsFiddle

这篇关于使用jQuery droppables触发放置事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！