如何以编程方式中止jQuery拖动操作？
使用jQuery UI，用户开始拖动操作。在拖动时，会发生异步事件，导致拖动的元素被删除（例如，基于计时器的刷新）。在刷新时，我想在刷新之前做这样的事情，以避免删除元素的错误：
element.trigger('dragstop');
但这似乎不起作用。
如何以编程方式中止jQuery拖动操作？
使用jQuery UI，用户开始拖动操作。在拖动时，会发生异步事件，导致拖动的元素被删除（例如，基于计时器的刷新）。在刷新时，我想在刷新之前做这样的事情，以避免删除元素的错误：
element.trigger('dragstop');
但这似乎不起作用。
这可以通过使用拖放事件的回调函数（返回false）来完成。 看到 http://jqueryui.com/demos/draggable/#event-drag
我在寻找同样的问题时添加了这个答案，我想要一个简短的答案。
回来吧 false 在拖动事件中。
感谢你的长篇答案，因为我通过他们找到了我的答案。
如 @FerRory 建议，你可以利用 drag 事件。
你可以利用这个 data() 确定元素是否可拖动的方法：
$("div").draggable({
drag: function() {
return !$(this).data("disabledrag");
},
revert: true
});
然后在您的异步操作中，如果被拖动的元素是已被删除的元素，您可以设置该数据（我假设您有一些系统用于将DOM元素与服务器中的数据相关联）：
var $dragging = $(".ui-draggable-dragging");
if ($dragging.length) {
// If this is the item that was deleted, stop dragging:
if ($dragging.attr("id") === "item-one") {
$dragging.data("disabledrag", true);
$dragging.addClass("deleted").html("This item has been deleted!");
}
}
我已经更新了我的例子 这里。首先 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] - http://bugs.jqueryui.com/ticket/8414
[2] - https://gist.github.com/3517765
[3] - https://forum.jquery.com/topic/how-to-cancel-drag-while-dragging