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

Posted 2023-05-08

【中文标题】如何在 snap 上找出 jQuery UI 可拖动元素的“捕捉到”元素

【英文标题】：How to find out about the "snapped to" element for jQuery UI draggable elements on snap

【发布时间】：2011-07-07 20:45:30

【问题描述】：

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

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

有什么建议吗？谢谢！

【参考方案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/

希望对您有所帮助。

【讨论】：

非常感谢！看起来不错，我试试看。

@jet：太棒了，如果您有任何问题，请告诉我。

HiThis 帮助我解决了同样的问题。谢谢

请注意，在 jQuery UI 1.9 及更高版本中，$(this).data('draggable') 变为 $(this).data('ui-draggable')，因为命名约定发生了变化。

有一个问题，有时 jQuery 会选择两个对齐点元素作为snapping = true。很不靠谱。也许我的实现略有不同，这可能不会发生在其他人身上。请在下面告诉我 - 谢谢。