20 February 2019
tags:

HTML5 drag and drop API They are useful in creating an intuitive UI. But there are some pitfalls

  • event.dataTransfer can only be set ondragstart, and cannot be read until ondrop (SO post). This is a security minded feature, as drag n drop is a feature that can potentially be cross browser/cross application (think drop file interface on browsers). Allowing ondragenter etc handlers sniff transferData is a bad idea.
  • in order for ondrop event to be called, ondragenter and ondragover must both be cancelled (by ev.preventDefault() or return false) (MDN). Most dom elements are not droppable. This ensures that on drop event only fires when the developer explicitly enables it.