Notes on Drag & Drop

• mdn docs
  • draggable element: set draggable="true", ondragstart handler (can also do: ondragend)
  • drop zone element: define ondrop, ondragover handlers
  • drag data: e.g. e.dataTransfer.setData("text/plain", e.target.id), .getData("text/plain")
  • drag image (beside cursor)
• (ref) to use a child element to drag a parent element:
  • parent: draggable="true"
  • children: draggable="false"
• file upload field
• react: react-dnd
• get caret position: caretPositionFromPoint (Firefox), caretRangeFromPoint (WebKit)
  • example
  • stackoverflow
  • CaretPosition properties: offsetNode, offset
  • caretRange returns a Range (or null)
• example (on github)