jquery-ui - 如何在 snap 上查找 jQuery UI 可拖动元素的 "snapped to"元素

Question

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

我想我可以根据拖动元素的当前位置计算最接近的元素，但我觉得应该有比暴力更简单的方法，因为 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 元素的原因是 jQueryUI 实际上足够智能，可以在您将一个 draggable 对齐到两个“snappable”元素时意识到。

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

希望有帮助。