1 Rendering diagram display and rough explanation

(Example original text: HTMLElement: drag event - Web API interface reference | MDN)

        First, let’s take a look at the renderings. It can be seen from the figure that the “div element with a white background” is dragged, and if the mouse pointer is not within the range of the “bottom purple area” during the dragging process, the mouse cursor state is “ disable".

The reason why the cursor is in a normal state within the scope of the "bottom purple area" is that the div element in this scope has added a dragover event, and the scope without this event is in the cursor "disabled" state

2 How to achieve the above effect (the color change in the example picture is not implemented, it is not important for the entire drag event) 

After talking about the characteristics of the above renderings, specifically how to achieve it, HTML5 standardizes an element attribute draggable. Except for picture and link elements, this attribute defaults to false on any element. But if you want to achieve the drag effect, this property is essential. code first

HTML code section

<div class="dropzone">
  <div id="draggable" draggable="true">
    this div can be dragged
  </div>
</div>
<div class="dropzone" id="droptarget"></div>

JS code part

let dragged;

const source = document.getElementById("draggable");// the dragged element
source.addEventListener("drag", (event) => {
  console.log("dragging");
});

source.addEventListener("dragstart", (event) => {
  // Define a variable to receive the dragged element
  dragged = event.target;
});
source.addEventListener("dragend", (event) => {
  console.log("dragend");
});

/* events fired on the drop targets */
const target = document.getElementById("droptarget");// The dragged target element
target.addEventListener("dragover", (event) => {
  // Block the default event, make the drop event work! ! ! ! must stop
  event.preventDefault();
});//

target.addEventListener("dragenter", (event) => {
  console.log("dragenter");
});
target.addEventListener("dragleave", (event) => {
  console.log("dragleave");
});

target.addEventListener("drop", (event) => {
  // Prevent the default event Prevent the opening of some elements like links. Only by preventing the default event can the drop event take effect
  event.preventDefault();
  // Move the dragged element to the target area, delete the element from the original position, and add it to the new position
  if (event.target.classList.contains("dropzone")) {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});

1. First, draggable = "true" in the "need to be dragged" element

2. Add a dragstart event to the "dragged" element to obtain the information of the dragged element

3. Add a dragover event to the "target area element to be dragged to" and block the default event so that the target area element can use the drop event

        4. Add a drop event to the "target area element to be dragged to", then prevent the default behavior of the drop event (because sometimes the target area is an element that can be clicked to open), and then delete the element from its original position, in the target region to add.

Three Summary

During the implementation process, it can be found that the three most important methods are dragstart, dragover, and drop events to complete the dragging effect. Other APIs serve as a more comprehensive option for developers to choose freely and then realize the design effect

It is easier to understand the usage of these seven methods after reading the above example

Acts on the "dragged" element

dragstart: Triggered when the user starts to drag an element or selected text, earlier than the trigger of the drag event, the entire drag process is only triggered once

drag: Triggered when an element or selected text is dragged, and this event will always be triggered while dragging and holding

dragend: Triggered when the dragging operation ends (such as releasing the mouse button or pressing the "Esc" key), later than the triggering of the drag event, the entire dragging process is only triggered once

Acts on the target area element "to be dragged to"

dragenter: Triggered when an element or selected text is dragged to a releasable target, it will be triggered once when it enters the target area, and it will be triggered repeatedly when it enters the target area repeatedly

dragover: Triggered when the dragged element is dragged to the target area element, and this event will always be triggered while dragging

dragleave: Triggered when the dragged element or selected text leaves a releasable target, it will be triggered once when it leaves the target area, and it will be triggered repeatedly when it enters repeatedly

drop: Triggered when the element or selected text is released on the dropable target, the entire dragging process is only triggered once, and the trigger is earlier than the dragend event

Combining these seven events can make a drag effect and any effect to be achieved during the drag process.