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

请参阅jQueryUI site关于droppables的视觉反馈。

Answer 2

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

Answer 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/

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

3 个答案: