Ответ 1
jQueryUI сохраняет внутреннее "состояние" элементов "snapped", но вам нужно немного поработать над ним.
Вам нужно будет определить обработчик событий для события stop (который вызывается, когда перетаскиваемый объект останавливается перетаскиванием).
Массив с именем snapElements поддерживается внутри данных виджетов и выглядит примерно так:
[
{
height: 102,
item: { /* DOM element */ },
left: 10,
snapping: false,
top: 10,
width: 102
}, ...
]
Здесь нам действительно нужны свойства item и snapping. snapping сообщит нам, если элемент в данный момент "привязывается" к перетаскиваемому объекту.
С учетом этого массива мы можем написать такой код, чтобы определить спящие цели, которые в настоящее время "привязываются":
$(".draggable").draggable({
snap: ".snap",
stop: function(event, ui) {
/* Get the possible snap targets: */
var snapped = $(this).data('draggable').snapElements;
/* Pull out only the snap targets that are "snapping": */
var snappedTo = $.map(snapped, function(element) {
return element.snapping ? element.item : null;
});
/* Process the results in the snappedTo array! */
}
});
Причина, по которой ваш конечный результат - это массив, а не один элемент DOM, заключается в том, что jQueryUI на самом деле достаточно умен, чтобы понять, когда вы привязали draggable к двум "съемным" элементам.
Вот рабочий пример, который показывает все это в действии: http://jsfiddle.net/andrewwhitaker/uYpnW/5/
Надеюсь, что это поможет.