Est-il possible de faire glisser un élément HTML hors d'un autre élément et de déclencher une modification avec jQuery?

Question

J'ai un élément conteneur dans lequel vous pouvez faire glisser des objets. Je le veux que si vous faites glisser un élément hors du conteneur (lorsque la souris croise la bordure de la div contenant) l'élément que vous faites glisser pour changer . Comment puis-je organiser cela?

 
$("#container img").draggable({ 
    helper: 'clone', 
    zIndex: 100 
}); 

Une fois que l'image traverse les limites de « #container » Je devrais être en mesure de changer la source d'image.

Answer 1

Essayez ce code:

$(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ out: function() { 
     $('#draggable').css('background-color', 'white'); 
    }, over: function() { 
    $('#draggable').css('background-color', 'blue'); 
} 
    }); 
}); 

Voici mon HTML:

<div id="droppable" style="width: 200px; height: 200px; border: 1px solid red; background-color: green;"> 
<div id="draggable" style="width: 50px; height: 50px; border: 1px solid pink; background-color: blue;">