Drag and drop events, dataTransfer, getBoundingClientRect

I'm going to write a lowcode project recently. For someone like me who has only written web projects, it's really nothing.Read the source code of a project, look at the things here and study it, and review the original things by the way.QAQ

First

Never used drag and drop

Drag and drop event

There are three types of objects in drag and drop events.

• Source Object: The object that was dragged and dropped during the process
• Process Objects: Objects passed through in drag and drop
• Destination object: The object that finally arrives

The three objects have different triggering events

• Source Object

  • dragstart: Start drag and drop, the event fires when the movement starts.
  • drag: Triggered when the dragged object is moved during the drag and drop process.
  • dragend: The drag and drop is over, triggered when the entire drag and drop operation ends.

• Process Objects

  • dragenter: The source object enters the scope of the process object, and is triggered when the dragged object enters the process object
  • dragover: The source object moves within the scope of the process object , triggered when the dragged object moves within the process object
  • dragleave: The source object leaves the scope of the process object, triggered when the dragged object leaves the target object

• Target:

  • drop: Triggered when the target is dropped.

dataTransfer object

A data transfer object dataTransfer is provided in all drag and drop events, mainly used to transfer data between the source object and the target object.

Method

• setData(format, data)

  • Set the data to be passed in the drag event, the parameter of format is the data type

  • This method stores data into the object in dataTransfer, accepts two parameters, the first one indicates the type of data to be stored, there are 4 types:

    • text/plain
    • text/html
    • text/xml
    • text/uri-list
    • If the parameters written are not the above, it is equivalent to creating a new data type.Makes the last item in the dataTransfer.types list to be the new type.

  • Parameter 2 is the data to be stored

  • Example: e.dataTransfer.setData("num",index)

• getData(format)

  • Get the data passed in the drag event, the format parameter is the data type
  • This method reads data from the dataTransfer object. The parameter is the data type specified in the setData method, for example: event.dataTransfer.getData('text/plain')

• clearData()

  • With parameter: clear the stored data corresponding to this parameter
  • No parameters: clear all data

getBoundingClientRect()

The

Element.getBoundingClientRect() method returns the size of the element and its position relative to the viewport (computer screen).

Combined review:

clientX: When the mouse event occurs, the position of the mouse relative to the X-axis of the browser (where the page is displayed on the browser);clientY: The position of the mouse relative to the y-axis of the browser when the mouse event occurs;screenX: The position of the mouse relative to the x-axis of the monitor screen when the mouse event occurs;screenY: When the mouse event occurs, the position of the mouse relative to the y-axis of the display screen;offsetX: When the mouse event occurs, the position of the mouse relative to the x-axis of the event sourceoffsetY: When the mouse event occurs, the position of the mouse relative to the y-axis of the event source

\