jQuery: сбросить элемент на несколько перекрывающихся целей

Question

JSFiddle (демо): http://jsfiddle.net/mr_goodcat/9a7qv/5/

У меня есть ситуация, когда предмет падает на несколько перекрывающихся целей.Проблема в том, что когда это происходит, вызывается только один обработчик отбрасывания.Если код выглядит следующим образом:

$(document).ready(function () {
  $("#droppable1").droppable();
  $("#droppable2").droppable();
  $("#droppable3").droppable();

  $("#draggable").draggable();

  $("#droppable1").bind("drop", drop);
  $("#droppable2").bind("drop", drop);
  $("#droppable3").bind("drop", drop);
});

function drop(e, ui) {
  $("#result").prepend("<p>" + ui.draggable.attr("id") + " ON " + $(this).attr("id") + "</p>");
}

Я только увижу «draggable ON droppable1», добавленный к результату div.(Что интересно: # droppable3 находится наверху).

Вопрос: Как (если это вообще возможно) сделать так, чтобы событие drop вызывалось для каждого droppable?

Answer 1

Лично я считаю, что функции перетаскивания jQuery являются неполными.Проверьте это расширение jQuery, которое позволяет вам делать именно то, что вы хотите.По этой ссылке есть демонстрация, которая делает именно то, что вы хотите.

http://threedubmedia.com/code/event/drop

Answer 2

«drop» не является настоящим событием javascript. JQuery выполняет зацикливание всех сбрасываемых элементов в порядке, в котором они были определены, и возвращает первый, соответствующий координатам отброшенного элемента Возможно, вы могли бы определить свою собственную функцию для этого. Ваша функция отбрасывания должна проверять зоны сброса в порядке стека. Я не знаю, как проверить порядок стеков элемента, но вы можете предсказать его, если используемый вами браузер соответствует спецификациям css2.

также, если все зоны размещения относительно расположены, достаточно проверить z-индекс каждого элемента и порядок, в котором они были объявлены. Если вместо этого вы используете отрицательные поля или другие методы для размещения элементов на странице, вы должны прочитать спецификации стека css2. http://www.w3.org/TR/CSS2/zindex.html

Однако вы можете инициализировать сбрасываемые зоны в порядке их соответствующего порядка стека, если вы знаете их заранее и если они не меняются. В вашем примере это будет:

$("#droppable3").droppable();
$("#droppable2").droppable();
$("#droppable1").droppable();