如何在snap上找到jQuery UI可拖动元素的"snapped to"元素

Question

我正在使用一些可拖动的元素,这些元素应该捕捉到其他元素,这些元素都有类,类似于,".classes"也是唯一的id "#class_id".一旦拖动完成了可拖动元素,我想找出可拖动元素捕捉到的那些".classes"中的哪一个.

我想我可以根据拖动元素的当前位置来计算最接近的元素,但我觉得应该有比蛮力更容易的方法,因为jQuery必须保留某种变量以确保捕捉有效.

有什么建议？谢谢!

Answer 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到两个"snappable"元素时.

这是一个展示所有这些内容的工作示例:http://jsfiddle.net/andrewwhitaker/uYpnW/5/

希望有所帮助.