Как узнать о элементе "привязанный к" для элементов jQuery UI для перетаскивания

Я работаю с несколькими перетаскиваемыми элементами, которые должны быть привязаны к другим элементам, все из которых имеют классы, что-то вроде ".classes", а также уникальный идентификатор "#class_id". Как только перетаскиваемые элементы будут перетаскиваться, я хотел бы узнать, какой из этих ".classes", с которым перетаскиваемый элемент привязан.

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

Любые предложения? Спасибо!

ОТВЕТЫ

Ответ 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/

Надеюсь, что это поможет.