如何在使用jQuery將一個對象拖動到另一個對象上時觸發事件（函數）？

如果我有：如何在使用jQuery將一個對象拖動到另一個對象上時觸發事件（函數）？

<script type="text/javascript" charset="utf-8"> 
    function test(){alert('test');} 
</script> 

<div id="drag_object"> 

</div> 

<div id="drag_over"> 

</div>

我怎樣才能觸發測試時drag_object拖過DRAG_OVER使用jQuery（）？

謝謝:)

來源

2010-09-02 significance

見jQueryUI site關於上droppables視覺反饋。

來源

2010-09-02 17:58:38 Jason

退房的jQuery UI的「拖拽」和「可棄」：http://jqueryui.com/demos/draggable/http://jqueryui.com/demos/droppable/

來源

2010-09-02 17:59:11 Armand

我需要通過使用測試（在將其添加動態文本股利操作DOM），我不能看到如何實現這使用jqueryUI？ – significance 2010-09-02 18:06:52

如果您使用的是jQuery UI的可拖動droppable，則會有一個名爲'drop'的事件，在#drag_object放入#drag_over後觸發。這個事件可以輕鬆地調用你的功能。您的代碼可能如下所示： \t $（「＃drag_object」）。draggable（）; 。 \t $（「＃可投放」）可投放（{ \t \t降：試驗（）; \t \t}）; 來源：http：//jqueryui.com/demos/droppable/#event-drop – lnrbob 2010-09-02 18:12:55

啊是的 - 除了使用'over'！謝謝。如果你想把它放在答案中，我會將它標記爲正確的。謝謝:) – significance 2010-09-02 18:23:55

可以使用做到這一點jQuery UI's Droppable和Draggable

你想要的是添加Droppable's Over event這既可以做這樣：

$(".selector").droppable({ 
    over: function(event, ui) { ... } 
});

或者這樣說：

$(".selector").bind("dropover", function(event, ui) { 
... 
});

我更喜歡使用第一種方法，但除了你之外。所以，你的例子

<meta charset="UTF-8" />  
    <style type="text/css"> 
    #drag_object{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #drag_over{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script type="text/javascript"> 
    $(function() { 
     $("#drag_object").draggable(); 
     $("#drag_over").droppable({ 
      over: function(event, ui) { alert('You dragged me over'); } 
     }); 

    }); 
    </script> 


<div class="demo"> 

<div id="drag_object" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="drag_over" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 

</div><!-- End demo -->

你可以看看這個：http://jsfiddle.net/TYrT8/

來源

2010-09-02 18:11:23

如何在使用jQuery將一個對象拖動到另一個對象上時觸發事件（函數）？

回答

相關問題