Можно ли перетащить элемент HTML из другого элемента и вызвать изменение с помощью jQuery?

Question

У меня есть элемент контейнера, в который можно перетаскивать объекты. Я хочу, чтобы он был таким, чтобы при перетаскивании элемента из контейнера (когда мышь пересекает границу содержащего элемента div) элемент, на который вы перетаскиваете менять. Как мне это устроить?

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

Как только изображение пересекает границы "#container", я могу сменить источник изображения.

Answer 1

Попробуйте этот код:

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

Вот мой 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;">