如何在 snap 上找出 jQuery UI 可拖动元素的“捕捉到”元素

Question

我正在处理一些应该捕捉到其他元素的可拖动元素，这些元素都有类，例如 ".classes" 和一个唯一的 id，"#class_id"。可拖动元素完成拖动后，我想找出可拖动元素已吸附到哪些“.classes”。

我想我可以根据拖动元素的当前位置计算最近的元素，但我觉得应该有比蛮力更简单的方法，因为jQuery 必须保留某种变量来确保捕捉作品。

有什么建议吗？谢谢！

Answer 1

jQueryUI 确实保持“捕捉”元素的内部“状态”，但您必须付出一些努力才能做到这一点。

您将要为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 元素的原因是，当您将 draggable 捕捉到两个“可捕捉”元素时，jQueryUI 实际上足够聪明。

下面是一个工作示例，展示了所有这些操作：http://jsfiddle.net/andrewwhitaker/uYpnW/5/

希望对您有所帮助。