Comment puis-je déclencher un événement (fonction) lorsque vous faites glisser un objet sur un autre en utilisant jQuery?

Question

si je dois:

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

<div id="drag_object"> 

</div> 

<div id="drag_over"> 

</div> 

Comment puis-je déclencher test() lorsque drag_object est déplacé sur drag_over en utilisant jQuery?

merci :)

Answer 1

Voir la jQueryUI site en ce qui concerne un retour visuel sur droppables.

Answer 2

Check out « draggable » et « largable » de jQuery UI: http://jqueryui.com/demos/draggable/http://jqueryui.com/demos/droppable/

Answer 3

Vous pouvez le faire en utilisant le jQuery UI's Droppable et Draggable

Qu'est-ce que vous voulez est d'ajouter le Droppable's Over event qui peut être fait soit de cette façon :

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

ou de cette façon:

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

Je préfère utiliser la première méthode mais c'est à vous sauf. Ainsi, par votre exemple

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

Vous pouvez vérifier cela: http://jsfiddle.net/TYrT8/