Example of using javascript to drag and swap div positions

1 Implementation Principle

This is done using the dragstart/ondragover/ondrop events of the DOM element. The dragged element is obtained when the drag starts, and then dragging is allowed. Finally, the mouse is lifted and dropped to the new position. The event.preventDefault() method is used here. Many people may be confused. Here is a brief introduction

event.preventDefault(): This method prevents the browser from executing 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; so we need to prohibit the default event through event.preventDefault(), so that we can allow the element to be dragged to a new position.

<!-- Drag div to change the order, applicable to switching layer order in gis -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
        body{
            display: flex;
            padding: 100px;
            flex-direction: column;
        }
        div{
            width: 100px;
            height: 100px;
            text-align: center;
        }
    </style>
 
</head>
<body>
   <div style="background-color: red;width:200px;height:200px;" draggable="true">Red</div>
    <div style="background-color: green;width:100px" draggable="true">Green</div>
    <div style="background-color: blue;" draggable="true">Blue</div>
</body>
<script type="text/javascript">
    let div = document.getElementsByTagName("div");
    let container = null;
    // Traverse and bind dragstart, dragover and drop events to each div for(let i=0;i<div.length;i++){
        div[i].ondragstart=function(){  
            container=this
        }
        div[i].ondragover=function(){
            event.preventDefault();
        }
        div[i].ondrop=function(){
            debugger;
            if(container!=null&&container!=this){
                // The specific idea is the same as variable value exchange let temp=document.createElement("div");
                document.body.replaceChild(temp,this); //Use the newly created div to occupy the destination positiondocument.body.replaceChild(this,container); //The destination div is placed at the starting positiondocument.body.replaceChild(container,temp) //The starting div is placed at the destination positiondebugger; 
                console.log('Execute business logic')
            }
        }
    }
</script>
</html>

This is the end of this article about the implementation example of javascript dragging and swapping div positions. For more relevant javascript dragging and swapping div content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: