如何以編程方式中止jQuery拖動操作？

Question

如何以編程方式中止jQuery拖動操作？

使用jQuery UI，用戶開始拖動操作。拖動時，會發生異常事件，導致拖動元素被刪除（例如，基於計時器的刷新）。在刷新時，我希望在刷新之前做這樣的事情，以避免刪除元素的錯誤：

element.trigger('dragstop'); 

但是，這似乎並沒有工作。

Answer 1

這可以通過使用拖放事件的回調函數（返回false）來完成。 請參閱http://jqueryui.com/demos/draggable/#event-drag

Answer 2

由於@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!");    
    } 
} 

我已經更新了我的例子here。第一個div將在5秒後「刪除」。

Answer 3

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

Answer 4

我添加這個答案，因爲我正在尋找同樣的問題，我想一個簡單的答案。

只需在拖動事件中返回false即可。

謝謝你長時間的回答，雖然我通過他們發現了我的。