Question

I have a container element that you can drag objects around in. I want it it so that if you drag an element out of the container (when the mouse crosses the border of the containing div) the element you’re dragging to change. How do I arrange this?

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

Once the image crosses the bounds of “#container” I should be able to change the image source.

Answer 1

Try this code:

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

Here’s my 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;">