如何在使用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将一个对象拖动到另一个对象上时触发事件（函数）？

回答

相关问题