如何以编程方式中止jQuery拖动操作？

如何以编程方式中止jQuery拖动操作

使用jqueryui，用户开始拖动操作。拖动时，会发生一个异步事件，导致删除被拖动的元素（例如，基于计时器的刷新）。在刷新中，我希望在刷新之前执行类似操作，以避免删除的元素出现错误：

   element.trigger('dragstop');

---

但这似乎不起作用

这可以通过使用拖放事件的回调函数（返回false）来完成。 请参见所建议的，您可以利用

拖动事件

您可以利用
data（）
方法来确定元素是否可拖动：

$("div").draggable({
    drag: function() {
       return !$(this).data("disabledrag");
    },
    revert: true
});

然后，在异步操作中，如果要拖动的元素是已删除的元素，则可以设置该数据（我假设您有一些将DOM元素与服务器数据关联的系统）：

我已经更新了我的示例。第一个
div
将在5秒后被“删除”。
在jQuery UI“按设计”中不允许正式取消拖动[1]——我不同意这种情况，但事实就是这样

如果您确实希望中途取消拖动，则需要结合一些技巧[2,3]：

$( window ).keydown( function( e ){
  if( e.keyCode == 27 ) {
    var mouseMoveEvent = document.createEvent("MouseEvents");
    var offScreen = -50000;

    mouseMoveEvent.initMouseEvent(
      "mousemove", //event type : click, mousedown, mouseup, mouseover, etc.
      true, //canBubble
      false, //cancelable
      window, //event's AbstractView : should be window
      1, // detail : Event's mouse click count
      offScreen, // screenX
      offScreen, // screenY
      offScreen, // clientX
      offScreen, // clientY
      false, // ctrlKey
      false, // altKey
      false, // shiftKey
      false, // metaKey
      0, // button : 0 = click, 1 = middle button, 2 = right button
      null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout).
            // In other cases, pass null.
    );

    // Move the mouse pointer off screen so it won't be hovering a droppable
    document.dispatchEvent(mouseMoveEvent);

    // This is jQuery speak for:
    // for all ui-draggable elements who have an active draggable plugin, that
    var dragged = $('.ui-draggable:data(draggable)')
      // either are ui-draggable-dragging, or, that have a helper that is ui-draggable-dragging
      .filter(function(){return $('.ui-draggable-dragging').is($(this).add(($(this).data('draggable') || {}).helper))});

    // We need to restore this later
    var origRevertDuration = dragged.draggable('option', 'revertDuration');
    var origRevertValue = dragged.draggable('option', 'revert');

    dragged
      // their drag is being reverted
      .draggable('option', 'revert', true)
      // no revert animation
      .draggable('option', 'revertDuration', 0)
      // and the drag is forcefully ended
      .trigger('mouseup')
      // restore revert animation settings
      .draggable('option', 'revertDuration', origRevertDuration)
      // restore revert value
      .draggable('option', 'revert', origRevertValue);
  }
}

现在，这不太好。但它是有效的。即使在悬停接受下拉列表时取消

玩得开心

[1] -

[2] -

[3] -
我在搜索同一个问题时添加了这个答案，我想要一个简短的答案

只需在拖动事件中返回
false
。

感谢您的长篇大论，因为我通过它们找到了我的答案。
这会触发停止事件，但不会取消拖动。如果您将示例拖动到这个位置，您可以在拖动矩形时看到它：stop:function（）{$（'div'）.css（'background-color'，'green'）.css（'border'，'solid 1px black'）；}，拖动：function（）{$（'div'）.css（'border'，'；}@remack好的，我误解了。是否要将可拖动对象恢复到其原始位置？由于可拖动对象当前缺少经批准的按命令取消的方式，因此每个答案都将是一个包含不同程度不需要的副作用的破解。这是功能请求单：注意：从dragstart返回false也会取消拖动。这似乎很好——为什么bug报告有一个
wontfix
[1]-
$( window ).keydown( function( e ){
  if( e.keyCode == 27 ) {
    var mouseMoveEvent = document.createEvent("MouseEvents");
    var offScreen = -50000;

    mouseMoveEvent.initMouseEvent(
      "mousemove", //event type : click, mousedown, mouseup, mouseover, etc.
      true, //canBubble
      false, //cancelable
      window, //event's AbstractView : should be window
      1, // detail : Event's mouse click count
      offScreen, // screenX
      offScreen, // screenY
      offScreen, // clientX
      offScreen, // clientY
      false, // ctrlKey
      false, // altKey
      false, // shiftKey
      false, // metaKey
      0, // button : 0 = click, 1 = middle button, 2 = right button
      null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout).
            // In other cases, pass null.
    );

    // Move the mouse pointer off screen so it won't be hovering a droppable
    document.dispatchEvent(mouseMoveEvent);

    // This is jQuery speak for:
    // for all ui-draggable elements who have an active draggable plugin, that
    var dragged = $('.ui-draggable:data(draggable)')
      // either are ui-draggable-dragging, or, that have a helper that is ui-draggable-dragging
      .filter(function(){return $('.ui-draggable-dragging').is($(this).add(($(this).data('draggable') || {}).helper))});

    // We need to restore this later
    var origRevertDuration = dragged.draggable('option', 'revertDuration');
    var origRevertValue = dragged.draggable('option', 'revert');

    dragged
      // their drag is being reverted
      .draggable('option', 'revert', true)
      // no revert animation
      .draggable('option', 'revertDuration', 0)
      // and the drag is forcefully ended
      .trigger('mouseup')
      // restore revert animation settings
      .draggable('option', 'revertDuration', origRevertDuration)
      // restore revert value
      .draggable('option', 'revert', origRevertValue);
  }
}