StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Officially cancelling a drag while dragging is not allowed in jQuery UI "by design"[1] -- I disagree with the situation, but it is as it is.</p> <p>If you somewhat reliably want to cancel a drag mid-flight, you will need to combine a couple of hacks [2, 3]:</p> <pre><code>$( 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); } } </code></pre> <p>Now, this isn't pretty. But it works. Even when canceling while hovering an accepting droppable.</p> <p>Have fun with it.</p> <p>[1] - <a href="http://bugs.jqueryui.com/ticket/8414" rel="nofollow">http://bugs.jqueryui.com/ticket/8414</a> <br/> [2] - <a href="https://gist.github.com/3517765" rel="nofollow">https://gist.github.com/3517765</a> <br/> [3] - <a href="https://forum.jquery.com/topic/how-to-cancel-drag-while-dragging" rel="nofollow">https://forum.jquery.com/topic/how-to-cancel-drag-while-dragging</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload