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

Question

如果我有：

<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()？

谢谢 ：）

Answer 1

有关 droppables 视觉反馈的信息，请参阅 jQueryUI 网站。

Answer 2

查看 jQuery UI 的“draggable”和“droppable”： http://jqueryui.com/demos/draggable/< /a> http://jqueryui.com/demos/droppable/

Answer 3

您可以使用 jQuery UI 的 Droppable 和 Draggable

你想要的是添加 Droppable 的 Over 事件 可以通过以下方式完成：

$( ".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/