4

When an HTML5 drag operation ends over another window, a Drop event fires in the target window and a DragEnd event fires on the dragged element in the source window.

For both copy and move, the drop target will perform a copy operation using the data carried by e.dataTransfer, and for the move operation the item must be removed in the source window.

When the event fires in the source window, how should the DragEnd handler determine whether the operation culminated in a drop or was aborted?

It is not enough to know whether a copy or cut operation is underway; a cut operation removes the item from the source only when it succeeds at the destination. It is, if you like, transactional.

Peter Wone
  • 17,965
  • 12
  • 82
  • 134

1 Answers1

2

I found an answer in mdn. Follow the link and scroll down to the section Finishing a drag. Unfortunately this information is in neither the DragEnd nor the DataTransfer documentation pages.

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 [whether] the drag was successful [or] 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.

Emphasis and repairs to sentence structure and grammar are mine.

Safari 8 is completely broken. It always reports "none" as the drop effect in the drop event.

Community
  • 1
  • 1
Peter Wone
  • 17,965
  • 12
  • 82
  • 134