How to realize dragging and swapping the position of div by javascript

This article introduces the relevant knowledge of "how to drag and swap the location of div in javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 realization principle

Use the dragstart/ondragover/ondrop event of the dom element to complete, get the drag element at the beginning of the drag, then allow the drag, and finally put it in a new location after the mouse is raised; here is the event.preventDefault () method, many people may be confused, here a brief introduction

Event.preventDefault (): this method tells the browser not to perform the default action associated with the event

We use it in the dragover event because the default action associated with dragover is to prevent data or elements from being placed in other elements; you need to disable the default event through event.preventDefault (), which allows you to drag the element to a new location

Body {display: flex; padding: 100px; flex-direction: column;} div {width: 100px; height: 100px; text-align: center;} red, green and blue let div = document.getElementsByTagName ("div"); let container=null / / traverses each div binding dragstart dragover and the drop event for (let iTune0posii)