Humans like to step their work or activity into steps: first, second, third, etc., because decomposition allows them to divide and optimize parts. When a writer wants to write a novel, he or she must consider dividing it into several parts, each of which tells the background story of the characters. In the same way, we also divided today’s main drag into drag and drop two steps, to discuss and analyze.

The history of drag

Drag and drop has become a standard in recent years. It is a part of HTML5. As an interactive behavior, drag and drop is widely used in interface software, such as desktop applications, Word and QQ software.

Before the HTML5 standard was implemented, drag and drop was widely used. Web developers used a combination of Click, mouseover, and Mousemove to implement drag and drop logic, which was a bit redundant and tedious.

In short, THE advent of HTML5 makes drag-and-drop development easy

Let’s start with a flow chart

The following figure depicts the drag and drop process.

Summary summary

Combined with the figure above, let’s comb through the knowledge points and make a breakdown and analysis.

What’s the total number of events
  • Drag:dragstart.drag.dragend
  • Put:dragenter.dragover.dragleave.drop
Which entities can be dragged
  • Set updraggableElements that are true.
  • Text that can be selected with the mouse. (Under popular science, it is forbidden to select text:wordContainerEle.onselectstart = event => false;), returns false.

This means:

  • The draggable attribute needs to be manually set to true.
  • The text is selected by default, and that’s something you’re used to.

Note that once an element is draggable, the text in it cannot be selected (as in Chrome tests).

What are the restrictions on play?
  • dragenter: Either way.
  • dragover: can
  • dragleave: can
  • drop: only inBlock default behavior in dragover listenerTo trigger the DROP
Does drag and drop bubble?

The answer is yes. Given that a parent element contains a child element, of course, the user dragging the child element is also indirectly dragging the parent element.

summary

This article explains the basics of drag and drop, and then discusses the application and examples of drag and drop: In detail javascript Drag and Drop (2) the application and examples of drag and drop.