如何了解“捕捉到"用于 jQuery UI 可拖动元素的元素在 snap 上 [英] How to find out about the "snapped to" element for jQuery UI draggable elements on snap

问题描述

我正在处理一些应该与其他元素对齐的可拖动元素，这些元素都有类，例如 ".classes" 和唯一的 id，"#class_id".一旦可拖动元素完成拖动，我想找出可拖动元素已对齐到哪些.classes".

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

有什么建议吗?谢谢！

解决方案

jQueryUI 确实保持对齐"元素的内部状态"，但是您必须花一点功夫才能做到.

您将要为 stop 事件(当可拖动对象停止拖动时调用).

一个名为 snapElements 的数组被维护在小部件数据中，它看起来像这样:

<预><代码>[{高度:102，item: {/* DOM 元素 */},左:10，捕捉:假，前10名，宽度:102}, ...]

我们真正关心的是 item 和 snapping 属性.snapping 会告诉我们该项目当前是否正在snapping"到一个可拖动的对象.

考虑到这个数组，我们可以编写这样的代码来确定当前捕捉"的可捕捉目标:

$(".draggable").draggable({snap: ".snap",停止:功能(事件，用户界面){/* 获取可能的捕捉目标:*/var snapped = $(this).data('draggable').snapElements;/* 仅拉出正在捕捉"的捕捉目标:*/var snappedTo = $.map(snapped, function(element) {返回 element.snapping ?元素.项目:空；});/* 处理 snappedTo 数组中的结果！*/}});

最终结果是一个数组而不是单个 DOM 元素的原因是 jQueryUI 实际上足够聪明，可以在您将 draggable 捕捉到两个可捕捉"元素时意识到这一点.

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

希望有所帮助.

I'm working a few draggable elements that should be snapping to other elements, which all have classes, something like, ".classes" and also a unique id, "#class_id". Once the draggable elements are done being dragged, I would like to find out which of those ".classes" that the draggable element has snapped to.

I suppose I could compute the closest element based on the current position of the dragged element, but I feel there should be an easier way than brute force, since jQuery would have to keep some sort of variable to make sure the snapping works.

Any suggestions? Thanks!

解决方案

jQueryUI does keep an internal "state" of "snapped" elements, but you have to work a little to get at it.

You're going to want to define an event handler for the stop event (which is called when a draggable object is stopped dragging).

An array called snapElements is maintained inside the widget data, and it looks something like this:

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

What we really care about here is the item and snapping properties. snapping will tell us if the item is currently "snapping" to a draggable object.

With this array in mind, we can write code like this to determine the snappable targets that are currently "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! */
    }
});

The reason that your end result is an array and not a single DOM element is that jQueryUI is actually smart enough to realize when you've snapped a draggable to two "snappable" elements.

Here's a working example that shows all of this in action: http://jsfiddle.net/andrewwhitaker/uYpnW/5/

Hope that helps.

这篇关于如何了解“捕捉到"用于 jQuery UI 可拖动元素的元素在 snap 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！