Как узнать об элементе «snapped to» для перетаскиваемых элементов jQuery UI на оснастке - PullRequest
Новая
       1

Как узнать об элементе «snapped to» для перетаскиваемых элементов jQuery UI на оснастке

15 голосов
/ 03 марта 2011

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

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

Есть предложения? Спасибо!

1 Ответ

30 голосов
/ 03 марта 2011

jQueryUI сохраняет внутреннее «состояние» «защелкивающихся» элементов, но вам нужно немного поработать, чтобы достичь этого.

Вы захотите определитьобработчик события stop (который вызывается, когда перетаскиваемый объект прекращает перетаскивание).

Массив с именем snapElements поддерживается внутри данных виджета и выглядит примерно так: 

[ 
    { 
        height: 102, 
        item: { /* DOM element */ }, 
        left: 10, 
        snapping: false, 
        top: 10, 
        width: 102 
    }, ...
]

Что нас действительно волнует, так это item и snappingсвойства.snapping сообщит нам, если элемент в данный момент «привязывается» к перетаскиваемому объекту.

Имея в виду этот массив, мы можем написать такой код, чтобы определить цели snappable, которые в данный момент «привязываются»: 

$(".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/

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

...