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/

希望有所帮助。

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

1 个答案: