¿Cómo cancelo programáticamente una operación de arrastre jQuery?

Question

¿Cómo aborto programáticamente una operación de arrastre jQuery?

Al usar jQuery UI, el usuario comienza una operación de arrastre. Mientras se arrastra, se produce un evento asíncrono que causa la eliminación del elemento arrastrado (una actualización basada en temporizador, por ejemplo). En la actualización, me gustaría hacer algo como esto antes de la actualización para evitar errores del elemento eliminado:

element.trigger('dragstop'); 

Pero eso no parece funcionar.

Answer 1

Esto se puede hacer utilizando la función de devolución de llamada (return false) del evento de arrastrar o soltar. Ver http://jqueryui.com/demos/draggable/#event-drag

Answer 2

Como @FerRory sugiere, puede aprovechar el evento drag.

Usted podría tomar ventaja del método data() para determinar si un elemento se pueda arrastrar o no:

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

Luego, en su acción asincrónico, podría establecer que los datos si el elemento que se arrastra es el que ha estado suprimido (estoy suponiendo que tiene algún sistema para asociar los elementos DOM con los datos del servidor):

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

he actualizado mi ejemplo here. El primer div se "eliminará" después de 5 segundos.

Answer 3

La anulación oficial de un arrastre mientras se arrastra no está permitida en la interfaz de usuario de jQuery "por diseño" [1] - No estoy de acuerdo con la situación, pero es como es.

Si algo fiable desea cancelar un arrastre pleno vuelo, tendrá que combinar un par de cortes [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); 
    } 
} 

Ahora, esto no es bastante. Pero funciona. Incluso cuando se cancela al pasar un aceptador droppable.

Diviértete con ella.

[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

añado esta respuesta como yo estaba buscando el mismo problema y quería una respuesta corta.

Simplemente devuelva false en el evento de arrastre.

Gracias a su larga respuesta, ya que encontré la mía a través de ellos.