使用 jQuery 将一个对象拖到另一个对象上时如何触发事件（函数）？答案

【问题标题】：how can i trigger an event (function) when dragging one object over another using jQuery?使用 jQuery 将一个对象拖到另一个对象上时如何触发事件（函数）？
【发布时间】：2010-09-02 17:57:15
【问题描述】：

如果我有：

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

<div id="drag_object">

</div>

<div id="drag_over">

</div>

当使用jQuery 将drag_object 拖到drag_over 上时如何触发test()？

谢谢:)

【问题讨论】：

标签： jquery drag-and-drop draggable

【解决方案1】：

请参阅jQueryUI site，了解有关可放置物品的视觉反馈。

【讨论】：

【解决方案2】：

查看 jQuery UI 的“可拖动”和“可放置”：http://jqueryui.com/demos/draggable/http://jqueryui.com/demos/droppable/

【讨论】：

我需要通过使用 test() 添加一个带有动态文本的 div 来操作 DOM，但我看不到如何使用 jqueryUI 来实现它？
如果您使用的是 jQuery UI 的可拖动 droppable，那么会在 #drag_object 被放入 #drag_over 后触发一个名为“drop”的事件。这个事件可以很容易地调用你的函数。您的代码可能如下所示： $("#drag_object").draggable(); $("#droppable").droppable({ drop: test(); });来源：jqueryui.com/demos/droppable/#event-drop
啊是的——除了使用'over'！谢谢。如果您想将其放入答案中，我会将其标记为正确。谢谢:)
这就是我在回答中写的
很高兴有帮助，只是扩展了艾莉森和杰森的答案；）

【解决方案3】：

您可以使用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/

【讨论】：