jQuery, перетащите изображение на перекрывающуюся цель

Question

Я использую jQuery для обнаружения падения на цель, рассматриваемая цель - изображение.Если я перетаскиваю одно изображение на другое, а затем удаляю его, оно заменяет целевой источник на пропущенный источник.Это работает нормально, пока два изображения не лежат друг на друге.

Некоторые изображения лежат рядом друг с другом, и иногда целевые изображения перекрываются.если я урону, и видимое изображение, и изображение ниже заменяются перетаскиваемым изображением.

$("#drag img").draggable({
  drag: function(event) { //somethings }
});

$("#target img").droppable({
  accept: '#drag img',
  drop: function() {//change src }
});

A live exampel <- Удалено, попробуйте перетащитьизображение справа </p>

Я надеюсь, что проблема ясна, и это хорошее решение.

Answer 1

Используйте stopImmediatePropagation , чтобы предотвратить вызов обработчика события на следующем изображении. Какое изображение будет затронуто, должно определяться порядком обработчиков событий. Если вам нужно, чтобы оно применялось только к верхнему изображению, убедитесь, что для любого изображения, которое перекрывает другое, сначала применяется обработчик.

Answer 2

Мне удается решить это немного более конкретно для моей проблемы.Не очень хорошо, но это работает, я использовал подчеркивающий div для определения падения вот так:

$("#target").droppable({
  accept: '#drag img',
  drop: function() {//change src of image in this div }
});

Не думаю, что это кому-нибудь поможет, но se @tvanfosson ответит за другое решение