16

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

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

有什么建议么？谢谢！

4

1 回答 1

30

jQueryUI确实保留了“捕捉”元素的内部“状态”，但您必须做一些工作才能做到这一点。

您将要为事件定义一个事件处理程序stop（当可拖动对象停止拖动时调用该事件处理程序）。

在小部件数据内部维护了一个名为的数组snapElements，它看起来像这样：

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

我们在这里真正关心的是itemandsnapping属性。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 实际上足够聪明，可以在您将 a 捕捉draggable到两个“可捕捉”元素时实现。

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

希望有帮助。

于 2011-03-03T13:14:15.357 回答