Response title
This is preview!
Move this topic
How to cancel drag while dragging
in Using jQuery UI
•
3 years ago
Hi all,
We have a scenario where we would like to cancel drag operation, if user presses Esc (escape) key on keyboard. Is there any method like cancel, stop, revert... (or any other smart way to implement this functionality using jquery library) which would stop operation and return object being dragged back to it's original position.
Now, the only way to cancel drag operation is to drag object over non-droppable area. But we would really like to cancel drag operation also with escape key pressed.
Thanks in advance.
1
Replies(8)
Re: How to cancel drag while dragging
3 years ago
Nobody knows solution to this problem?
Please respond to me, if this is not possible with current version of jquery-ui or am I missing something. Thank you all.
Leave a comment on vitko555's reply
Re: How to cancel drag while dragging
3 years ago
Re: How to cancel drag while dragging
3 years ago
I think this is not a good solution. Because, what will happen if user is over droppable area? The item being dragged will be placed to droppable area, but it should revert back to it's original position.
Re: How to cancel drag while dragging
3 years ago
On the other hand. I got an idea. I will give it a try.
Leave a comment on rdworth's reply
Re: How to cancel drag while dragging
3 years ago
You can stop drag by return false in drag event:
$( ".selector" ).draggable({
drag: function(event, ui) { if(my_condition) return false; }
});
drag: function(event, ui) { if(my_condition) return false; }
});
Leave a comment on federico.vaga's reply
Re: How to cancel drag while dragging
3 years ago
in your cancel logic, set the draged div's css top and left to 0px, for example:
if(drop)
{
//drop logic here
}
else
{
//don't drop
$( ".selector" ).css('top','0px');
$( ".selector" ).css('left','0px');
}
this will set the selector's position to it's original immediately.
Leave a comment on naaaaame's reply
Re: How to cancel drag while dragging
11 months ago
- $( window ).keypress( function( e ){
- if( e.keyCode == 27 )
- $( '.ui-draggable-dragging' ).draggable( 'option', 'revert', true ).trigger( 'mouseup' );
- } )
Leave a comment on rafalglowacz's reply
Re: How to cancel drag while dragging
6 months ago
@rafalglowacz : That won't work if you cancel while hovering the droppable.
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.
If you somewhat reliably want to cancel a drag mid-flight, you will need to combine a couple of hacks (amongst which some of the suggestions above + [2], etc.):
- $( window ).keypress( 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);
- }
- }
Now, this isn't pretty. But it works, even while canceling while hovering an accepting droppable.
Have fun with it.
__
Marcel
Leave a comment on EleotleCram's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to vitko555's question
Statistics
- 8 Replies
- 13436 Views
- 1 Followers
