jquery-ui - jQuery UI – 可拖动 'snap' 事件

Question

我正在寻找一种绑定(bind) snap 事件的方法。

当我在表面上拖动一个元素并且可拖动元素捕捉到声明的捕捉位置时，我想触发一个事件。

类似这样的事情:

$(".drag").draggable({
  snap: ".grid",
  snaped: function( event, ui ) {}
});

奖励点:引用 .grid 元素，其中 draggable 元素被捕捉。

Answer 1

draggable 小部件尚未公开此类开箱即用的事件。您可以修改它并维护您的自定义版本，或者更好的是，从中派生一个新的小部件并在那里实现新事件。然而，还有第三种方法。

来自this question ，我们知道小部件在其 snapElements 属性中存储了一组潜在的“可捕捉”元素。反过来，此数组中的每个元素都会公开一个 snapping 属性，如果可拖动帮助器当前已捕捉到此元素，则该属性为 true ，否则为 false (助手可以同时捕捉多个元素)。

snapElements 数组会针对每个 drag 事件进行更新，因此它在 drag 处理程序中始终是最新的。从那里，我们只需从 data() 的关联元素获取 draggable 小部件实例。 ，并调用其 _trigger() 方法来引发我们自己的 snapped 事件(实际上是 dragsnapped 在幕后)。顺便说一句，我们可以$.extend() ui 对象与包装捕捉元素的 jQuery 对象:

$(".drag").draggable({
    drag: function(event, ui) {
        var draggable = $(this).data("draggable");
        $.each(draggable.snapElements, function(index, element) {
            if (element.snapping) {
                draggable._trigger("snapped", event, $.extend({}, ui, {
                    snapElement: $(element.item)
                }));
            }
        });
    },
    snap: ".grid",
    snapped: function(event, ui) {
        // Do something with 'ui.snapElement'...
    }
});

但是上面的代码仍然可以改进。按照目前的情况，只要可拖动帮助器保持对齐，每个drag 事件(发生很多)都会触发一个snapped 事件。一个元素。此外，捕捉结束时不会触发任何事件，这不太实用，并且有损于此类事件成对发生的约定(snapped-in、snapped-out) >).

幸运的是，snapElements 数组是持久的，因此我们可以使用它来存储状态。我们可以向每个数组元素添加一个 snappingKnown 属性，以便跟踪我们已经为该元素触发了一个 snapped 事件。此外，我们可以使用它来检测自上次调用以来元素是否已被捕捉并做出相应的 react 。

请注意，下面的代码没有引入另一个 snapped-out 事件，而是选择在 中传递一个附加的 snapping 属性(反射(reflect)元素的当前状态) ui 对象(当然，这只是一个偏好问题):

$(".drag").draggable({
    drag: function(event, ui) {
        var draggable = $(this).data("draggable");
        $.each(draggable.snapElements, function(index, element) {
            ui = $.extend({}, ui, {
                snapElement: $(element.item),
                snapping: element.snapping
            });
            if (element.snapping) {
                if (!element.snappingKnown) {
                    element.snappingKnown = true;
                    draggable._trigger("snapped", event, ui);
                }
            } else if (element.snappingKnown) {
                element.snappingKnown = false;
                draggable._trigger("snapped", event, ui);
            }
        });
    },
    snap: ".grid",
    snapped: function(event, ui) {
        // Do something with 'ui.snapElement' and 'ui.snapping'...
        var snapper  = ui.snapElement.attr("id"),snapperPos = ui.snapElement.position(),
            snappee  = ui.helper.attr("id"),     snappeePos = ui.helper.position(),
            snapping = ui.snapping;
        // ...
    }
});

您可以测试此解决方案 here .

最后，另一个改进可能是使 snapped 事件可取消，就像 drag 事件一样。为此，如果对 _trigger() 的调用之一返回 false<，我们必须从 drag 处理程序返回 false/。不过，在实现此操作之前，您可能需要三思而后行，因为在一般情况下，取消管理单元或管理单元上的拖动操作看起来并不是一个非常用户友好的功能。

更新:从 jQuery UI 1.9 开始，the data() key becomes the widget's fully qualified name, with dots replaced by dashes 。因此，上面用于获取小部件实例的代码变为:

var draggable = $(this).data("ui-draggable");

而不是:

var draggable = $(this).data("draggable");

1.9 中仍然支持使用非限定名称，但已弃用，并且在 1.10 中将不再支持。