Как я могу вызвать событие (функцию) при перетаскивании одного объекта на другой с помощью jQuery?

Question

если у меня есть:

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

<div id="drag_object">

</div>

<div id="drag_over">

</div>

как я могу вызвать test (), когда drag_object перетаскивается через drag_over с помощью jQuery?

спасибо:)

Answer 1

Проверьте "перетаскиваемый" и "сбрасываемый" интерфейс jQuery: http://jqueryui.com/demos/draggable/ http://jqueryui.com/demos/droppable/

Answer 2

Вы можете сделать это, используя Droppable пользовательского интерфейса jQuery и Draggable

Вам нужно добавить событие Over of 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/

Answer 3

См. jQueryUI сайт о визуальной обратной связи на droppables.