how can i trigger an event (function) when dragging one object over another using jQuery?

Question

if i have:

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

<div id="drag_object">

</div>

<div id="drag_over">

</div>

how can i trigger test() when drag_object is dragged over drag_over using jQuery?

thanks :)

Answer 1

See the jQueryUI site regarding visual feedback on droppables.

Answer 2

Check out jQuery UI's "draggable" and "droppable": http://jqueryui.com/demos/draggable/ http://jqueryui.com/demos/droppable/

Answer 3

You can do this using the jQuery UI's Droppable and Draggable

What you want is to add the Droppable's Over event which can be done either this way:

$( ".selector" ).droppable({
    over: function(event, ui) { ... }
});

or this way:

$( ".selector" ).bind( "dropover", function(event, ui) {
 ...
});

I prefer using the first method but it's except to you. So, for your example

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

You can check this out: http://jsfiddle.net/TYrT8/