javascript - jQuery UI - 如何检查可拖动项目是否对齐

Question

我遇到 jQuery UI 条件问题。

代码如下:

$(function() {
    $("#draggable2").draggable({ 
        snap: ".ui-widget-header",
        snapMode: "inner", 
        revert: true
    });
});

我的问题:

如何使用 if 语句，以便我的可拖动项目在捕捉到我的 ui-widget-header 时不恢复？

非常感谢;)

Answer 1

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

您需要为停止事件定义一个事件处理程序(当可拖动对象停止拖动时调用该事件处理程序)。

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

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

您真正需要的是snapping 属性。捕捉会告诉您该项目当前是否正在“捕捉”到可拖动对象。

snapElements 数组会针对每个 drag 事件进行更新，因此它在 drag 处理程序中始终是最新的。从那里，我们只需使用 data() 从关联元素中获取 draggable 小部件实例。

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

$("#draggable2").draggable({
    snap: ".ui-widget-header",
    snapMode: "inner", 
    revert: true
    stop: function(event, ui) {
        var draggable = $(this).data("draggable");
        $.each(draggable.snapElements, function(index, element) {
            if (element.snapping) {
                //i can't quit figure out how to stop the reverting from here, but here's you condition.
                console.log("Snapped !!");
            }
        });
    },
});

哦，我在网上发现了这个，希望对你有帮助。 Revert Function callback.