javascript - jQuery UI：开始可拖动之前

Question

如何在jQueryUI开始拖动之前实现一个before start事件来改变可拖动元素在DOM中的位置和位置？

Answer 1

您可以扩展原型方法：

看演示

var oldMouseStart = $.ui.draggable.prototype._mouseStart;
$.ui.draggable.prototype._mouseStart = function (event, overrideHandle, noActivation) {
    this._trigger("beforeStart", event, this._uiHash());
    oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
};

$("#draggable").draggable({
    beforeStart: function () {
        console.log('beforeStart::');
    }
});

Answer 2

我不敢访问 jQuery UI 私有变量，所以我是这样实现的：

// The mouse interaction sequence for dragging starts with a mousedown action.
element.on('mousedown', function() {

    // Mouseup cancels dragging. This is a boring click.
    element.one('mouseup', function() {
        element.off('mousemove.mynamespace');
    });

    // Moving the mouse while holding mousedown is dragging.
    // This is also what sets off jQuery UI draggable, 
    // but we registered our event listeners first.
    element.one('mousemove.mynamespace', function() {

         // !! Your beforeStart code here.

    });
});

// Initialize jQuery UI draggable AFTER our own event listeners.
element.draggable();

Answer 3

我发现作为“助手”选项传递给可排序的方法将在“开始”之前被调用，并传递（作为第二个参数）已单击的项目。您可以在此方法中执行您需要执行的操作，然后只返回元素本身（默认的“原始”助手行为）。我正在使用它来设置容器的高度，这样它就不会折叠并触发浏览器窗口的滚动。看起来是这样的：

$(list).sortable({
  helper: function(event, element) {
    // it's too late if we wait until start to do this
    $(this).css('height', this.$().height());
    return element;
  }
})

Answer 4

为此，我使用了 mouseup 和 mousedown：

var timeout;

$('.draggable').mousedown(function() {
  $('#dragContainer').append($(this));
  $(this).css({
    top: 0,
    left: 0
  });
});

$('.draggable').draggable(); 

如果实际上是单击而不是拖动，我还曾经mouseup重置旧的父级和位置。mousedown

beforeStart有一个与该选项一起使用的事件会很好，distance但我没有找到它......