Example of using javascript to drag and swap div positions
1 Implementation PrincipleThis 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:
|
<<: Detailed explanation of how MySQL solves phantom reads
>>: Detailed explanation of Nginx rewrite jump application scenarios
Recommend
Detailed explanation of the execution process of JavaScript engine V8
Table of contents 1. V8 Source 2. V8 Service Targ...
Detailed example of using js fetch asynchronous request
Table of contents Understanding Asynchrony fetch(...
Solve the problems encountered when installing mysql-8.0.11-winx64 in Windows environment
Download the MySQL installation package. I downlo...
MySQL changes the default engine and character set details
Table of contents 1. Database Engine 1.1 View dat...
How to modify the MySQL character set
1. Check the character set of MySQL show variable...
React Router V6 Updates
Table of contents ReactRouterV6 Changes 1. <Sw...
mysql+mybatis implements stored procedure + transaction + multi-concurrent serial number acquisition
Database stored procedures DROP PROCEDURE IF EXIS...
How to check and organize website files using Dreamweaver8
What is the purpose of creating your own website u...
The solution of html2canvas that pictures cannot be captured normally
question First, let me talk about the problem I e...
Application example tutorial of key in Vue page rendering
introduction During the front-end project develop...
MySQL 8.0.13 installation and configuration method graphic tutorial under win10
I would like to share the installation and config...
How to deploy Go web applications using Docker
Table of contents Why do we need Docker? Docker d...
How to quickly modify the host attribute of a MySQL user
When you log in to MySQL remotely, the account yo...
Sublime Text - Recommended method for setting browser shortcut keys
It is common to view code effects in different br...
Advantages and disadvantages of Table layout and why it is not recommended
Disadvantages of Tables 1. Table takes up more byt...