Menu
I need to implement drag 'n' drop of HTML elements between browser windows.
When an element is dropped from window A to window B, it must be removed from window A (and added to window B).
When the drag 'n' drop is cancelled (happens when the user presses the "esc" key, or sometimes when the drag 'n' drop feature seems to bug), the element must go back to its original location.
Currently what I'm doing is to keep a "hasBeenDropped" flag, which is set to false in dragstart, and to true in drop. In dragend, I check my flag, and if it is not set to true, it means that the drop has fired in another window, or that the operation has been cancelled. I need to distinguish these two cases (drop in another window vs cancel), in order to act accordingly (eg remove the window or replace it to its original location).
TL;DR : I need to be able to detect when a native HTML5 drag 'n' drop operation has been cancelled (for example when a user presses "esc" key).
Is there any way to do so??
893
With the advent of the HTML5 Drag and Drop API, developers will be able to hook into native events and attributes to handle these interactions. Lets go through the API so we can get an overview of how it all works. The native API lets us define elements that are draggable by using the draggable="true" attribute on your desired elements.
It seems that there is no way to cancel an HTML5 drag and drop using JavaScript. return ing false in the dragstart doesn't seem to do anything. Any ideas? Show activity on this post. You can cancel it by calling event.preventDefault () in the event handler.
By default when draggable elements are dragged, only form elements such as input will be able to accept them as a drop. You would have seen this before; if you select some text and drag it into a textarea the text is copied into the textarea element.
Processing Data Between Elements on Drag and Drop. The native API provides the basics to support dropping and dragging of elements. While the API provides you with events to hook onto to know when a successful drag has taken place, unlike jQuery UI, you will need to manually move/copy elements to adjust the API.
Like you, I used a flag to determine whether or not a drop had successfully occurred elsewhere, which more or less implies that it hasn't been cancelled. However there appears to be a more proper way, as described in MDN:
Finishing a Drag
Once the drag is complete, a dragend event is fired at the source of the drag (the same element that received the dragstart event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the dropEffect property to determine what drop operation occurred.
If the dropEffect property has the value none during a dragend, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The mozUserCancelled property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.
The mozilla specific property is obviously undesirable, but the dropEffect property itself should be sufficient for most purposes. I tested it myself (tiles being dragged into dropzones within an iframe) and it seemed to work as expected.
This is taken directly from the current MDN page on the topic:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#dragend
Probably not so useful to you since you switched jobs, but information on this topic is very difficult to find, so hopefully the next person searching will benefit.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
