Question

我遇到了jQuery UI问题。

以下是代码：

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

我的问题：

如何使用 if语句以便我的可拖动项目 NOT 还原为 ui-widget-header ？< / p>

非常感谢;）

Answer 1

jQueryUI确实保留了“snapped”元素的内部“状态”，但你必须稍微努力才能实现它。

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

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

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

您在这里寻找的是snapping属性。捕捉将告诉您该项目当前是否为“snapping”到可拖动对象。

每个snapElements事件都会更新drag数组，因此drag处理程序中的draggable数组始终是最新的。从那里，我们只需要从data（）的关联元素中获取$("#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 !!"); } }); }, });小部件实例。

考虑到这个数组，我们可以编写这样的代码来确定它是否与目标对齐：

{{1}}

哦，我发现这个在线希望它有用。 Revert Function callback.

jQuery UI - 如何检查可拖动项是否快照

1 个答案: