Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of native drag and drop events and basic implementation methods in html5, which is very detailed and has certain reference value. Friends who are interested must read it!

Drag and drop implementation

What is mainly used is the drag effect that comes with H5. In fact, the front end of the project was written in React, and it was only after the implementation in H5 that I learned that the Dan Abramov boss has a React-DnD component that encapsulates the native drag-and-drop method. A little bit of study, very strong. It will be used later to write another article to share.

Definition and usage of related events

Six events are involved in one attribute. Events are all H5 native events.

Attribute

Draggable: dragging is not allowed in normal div. You need to add the attribute draggable= "true" to make the element draggable.

Event

Ondragstart: drag and drop element event. Called when dragged.

Ondrag: drag and drop element event. Called when the element is being dragged.

Ondragend: drag and drop element event. Called when a dragged element is placed.

Ondragenter: place the element event. Called when the element is dragged into the valid area of the placement element.

Ondragover: place the element event. Called when the dragged element overrides the valid area of the placement element

Ondragleave: place the element event. Called when the element is dragged out of the valid area of the placement element.

Ondrop: place the element event. Called when a drag-and-drop element is placed in a drop element.

Basic code implementation

The implementation code for the event related to the drag element is as follows.

Function handleOndragstart () {/ * this event is called when a dragged element is dragged. It is generally used to obtain the unique identity of the drag-and-drop element, such as id. To facilitate element positioning when subsequent data updates * /} function handleOndragend () {/ * this event is called when the dragged element is placed. Generally used to reset variable operation * /} function handleOndrag () {/ * this event is implemented according to individual needs * /}

The drag element H5 code is as follows:

This element is a placement element

Example

The following code enables child elements to be dragged between two div:

Drag and drop implementation .parent {display: flex; width: 450px; justify-content: space-around;} .container {height: 300px; width: 200px; background-color: rgba (255,255,0,0.3); display: flex; flex-direction: column; justify-content: center; align-items: center } .box {width: 100px; height: 50px; background-color: rgba (255,255,255,1);} function handleOndragstart (event) {/ / sets the data to be dragged, which can be simply understood as setting the value of Box to the id of the element being dragged. Here is "Box" event.dataTransfer.setData ("Box", event.target.id);} function handleOndragover (event) {event.preventDefault ();} function handleOndrop (event) {/ / call event.preventDefault () when the dragged element is dropped; var data = event.dataTransfer.getData ("Box") / / append the drag-and-drop element to the event.target.appendChild (document.getElementById (data));}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.