Drag and Drop API keynotes

I created an example about Javascript Drag-n-Drop APIs at https://hta218.github.io/dnd-keynotes

Below are some interesting key-notes I've learned about the APIs.

Basic concepts

• A typical drag operation begins when a user selects a draggable element, drags the element to a dropzone, and then releases the dragged element.

• Events:

Keynotes

• To make an element draggable, add draggable="true" attribute

• dragstart

  • dragstart is the first event fired when a drag operation starts on a draggable element

  • use e.dataTransfer.setData() method to set any drag's data, this will stay during the drag operation

  • If you don't want the translucent image generated from the drag target during drag, use e.dataTransfer.setDragImage() to change it

• The dropEffect

  • The dropEffect property is used to control the feedback the user is given during a drag-and-drop operation

  • dropEffect property could be:

    1. move: dragged data will be moved to the dropzone.
    2. copy: dragged data will be copied to the dropzone.
    3. ..

• The dropzone

  • To make an element becomes a dropzone, it must have both dragover and drop event handler.

  • Remember to call e.preventDefault() in dragover handler or the browser won't let you drop anything inside

  • Keep mind that we can only use the dataTransfer.getData() in the drop-handler (it will return empty string inside dragover or dragenter handler)

• dragend

  • The dragend event fires after a drag operation finished regardless of whether the drag completed or was canceled
  • If the drag operation failed, the value of e.dataTransfer.dropEffect will be "none"

Refs

• DigitalOcean
• MDN Documentations
• https://web.dev/drag-and-drop/
• https://html.spec.whatwg.org/multipage/dnd.html#dnd