使用jQuery droppables觸發拖放事件

此問題的變體已被問到，但答案都是不同的，有些過時，並且不適合我，所以我希望這是jQuery中語法規則更改的問題，我丟了。使用jQuery droppables觸發拖放事件

場景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/

上面創建了一個投擲的，可拖動，和一個div，我想用來以某種方式觸發與droppable上的放置事件相關的功能。

可拖動工作正常，將其拖動到可放下並釋放觸發警報。

問題是如何在不使用實際可拖動的情況下觸發相同的過程......或者至少不使用放在頂部的可拖動的（例如通過點擊第三個div）？

來源

2014-01-22 DA.

http://stackoverflow.com/a/29284621/278405?programmatically-drag-and-drop-element-onto-another-element – cychoi

你可以從功能看：

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

如果定義方法如可放開則聲明中DROP，他們被稱爲只有當一個DOM元素（UI對象）對他們因此下降了你無法觸發這些功能。

如果您需要觸發DROP那麼我會建議你該事件綁定可放開爲：

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

的DROP功能現在可以通過丟棄第二DIV或通過單擊第三DIV作爲觸發你的案件。使用手動觸發它：

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

注意：參數「UI」如果手動觸發將是不確定的，否則它將包含UI對象時拖動被它丟棄。

這裏是jsFiddle

來源

2014-01-22 09:48:46 MrNobody

感謝您給我們！我已經看到'trigger（'drop'）'語法很多，但永遠無法使它工作。顯然你只能觸發drop事件，如果它綁定到droppable而不是它被設置爲參數？ –

@DA。是的，如果它被設置爲參數，那麼它需要UI對象，因此您需要刪除DOM元素以調用這些函數。從這個http://api.jquery.com/trigger/可以清楚地看到，只有在使用'.on'方法進行綁定時才能觸發事件。 – MrNobody

使用jQuery droppables觸發拖放事件

回答

相關問題