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

Editor to share with you how to use drag and drop in the front-end html5, I believe most people do not know much about it, so share this article for your reference. I hope you will learn a lot after reading this article, so let's go to know it!

Brief introduction

Drag/Drop is a common and common operation that grabs an object and puts it where you want it to be. In H5, drag and drop is a standard operation, any element can be dragged! But! To achieve drag and drop, you need to add drag attributes.

Drag attribute in H5: draggable: auto | true | false

Note: links and images are draggable by default, so the draggable attribute is not required.

-Drag (triggers an event when dragging a target)

Dragstart-this event is triggered when the element starts dragging

Drag-this event is triggered when the element is dragging

Dragend-this event is triggered after the element has been dragged

-Drop (triggers an event when the target area is released)

Dragenter-this event is triggered when the dragged element enters the target area

Dragover-this event is triggered when the dragged element is dragged within the target area

Dragleave-this event is triggered when the dragged element leaves the target area

Drop-this event is triggered when the dragged element is dropped in the target area

Drag and drop step

Set the element attribute draggable to true:

Left area removable text one movable text two movable text three removable text four removable text five right area

Drag

Dragstart event: in the drag-and-drop operation, the data is stored and obtained through dataTransfer, and there is a DataTransfer object in each event event object to hold the dragged data. It can hold one or more pieces of data, one or more data types.

Let left = document.getElementById ('left') let target = document.getElementById (' right') left.addEventListener ('dragstart', (event) = > {const target = event.target; / / you can setData dataTransfer during the start event (ondragstart) of the project drag. / / drag, dataTransfer attribute, equal to transport vehicle / / later use dataTransfer.getData to get / / at the end of the project drag, you can get the value in the dataTransfer object. Event.dataTransfer.setData ('Text', target.id) / / js event has bubbling mechanism console.log (' drag starts dragging 1');})

Drag event: always executes during the drag and drop process:

Left.addEventListener ('drag', (event) = > {console.log (' drag is delaying 2');})

Dragend event: end:

Left.addEventListener ('dragend', (event) = > {console.log (' dragend drag ends 7');})

Place

Dragenter and dragleave events: enter or leave the target area:

Target.addEventListener ('dragenter', (event) = > {console.log (' dragenter enters the area 3')}) target.addEventListener ('dragleave', (event) = > {console.log (' dragleave leaves the drag area 5')})

Dragover event: data / elements cannot be placed into other elements by default. If you need to set allow placement, block the default behavior of the element.

Target.addEventListener ('dragover', (event) = > {/ / block the default behavior event.preventDefault (); console.log (' dragover dragged 4'in the area)})

Drop event: put it down

Target.addEventListener ('drop', (event) = > {console.log (' drop release mouse 6') let drag_id = event.dataTransfer.getData ('text') target.appendChild (document.getElementById (drag_id))}) complete code Document .main {display: flex; justify-content:space-around;} .left {width: 300px; height: 500px; border: 1px solid lightseagreen Margin-right: 10px; / * background-color: green; * /} .right {width: 300px; height: 500px; border: 1px solid lightseagreen; text-align: center; padding: 1px; / * background: red; * /} .txt {border: 1px solid gray; margin: 1px; padding: 5px; cursor: move } left area movable text one movable text two movable text three movable text four movable text five right area let left = document.getElementById ('left') let target = document.getElementById (' right') left.addEventListener ('dragstart', (event) = > {event.dataTransfer.setData (' Text') Target.id) console.log ('drag starts dragging 1') }) target.addEventListener ('dragstart', (event) = > {const target = event.target; event.dataTransfer.setData (' Text', target.id)}) left.addEventListener ('drag', (event) = > {console.log (' drag is dragging 2');}) left.addEventListener ('dragend', (event) = > {console.log (' dragend dragging ends 7') }) target.addEventListener ('dragenter', (event) = > {console.log (' dragenter enters the area 3')}) target.addEventListener ('dragover', (event) = > {event.preventDefault (); console.log (' dragover dragged in the area 4')}) left.addEventListener ('dragover', (event) = > {event.preventDefault () }) target.addEventListener ('dragleave', (event) = > {console.log (' dragleave leaves the drag area 5')}) target.addEventListener ('drop', (event) = > {let drag_id = event.dataTransfer.getData (' text') target.appendChild (document.getElementById (drag_id))}) left.addEventListener ('drop') (event) = > {let drag_id = event.dataTransfer.getData ('text') left.appendChild (document.getElementById (drag_id)})

Data storage and acquisition are realized through dataTransfer in dragstart events, and there is a DataTransfer object in each event event object to save the dragged data. You can setData the dataTransfer during the start event (ondragstart) of the project drag. Event.dataTransfer.setData () sets the value, and after dragging, you can get the value in the dataTransfer object through event.dataTransfer.getData ().

By default, browsers cannot place data / elements in other elements, and if you need to set allow placement, block the default behavior of elements. Blocked by event.preventDefault ().

You can change the drag effect by adding css styles. Example: dragSrc.classList.add ('ds'). Using classList to add, remove, and switch CSS classes to an element, the classList attribute is read-only, but can be modified using the add () and remove () methods.

Use the appendChild () method to remove an element to another element.

HTML Drag and Drop API

DataTransfer ()

HTML DOM appendChild () method

HTML DOM addEventListener () method

The above is all the content of the article "how to use drag and drop in front-end html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.