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
Full steps to create a high-performance index in MySQL
Table of contents 1. Index Basics 1. Types of Ind...
MYSQL implements sample code to prevent duplicate addition when adding shopping cart
Preface Recently, due to work reasons, I was work...
Solutions to problems using addRoutes in Vue projects
Table of contents Preface 1. 404 Page 1. Causes 2...
Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk
Problem Description When using Windows Server 201...
JavaScript implements simple calculator function
This article shares the specific code of JavaScri...
How to query or obtain images in a private registry
Docker queries or obtains images in a private reg...
Implementation of Docker private library
Installing and deploying a private Docker Registr...
Analysis of the difference between bold <b> and <strong>
All of us webmasters know that when optimizing a ...
MySQL not null constraint case explanation
Table of contents Set a not null constraint when ...
How to use Docker Swarm to build WordPress
cause I once set up WordPress on Vultr, but for w...
MySQL detailed single table add, delete, modify and query CRUD statements
MySQL add, delete, modify and query statements 1....
React Native scaffolding basic usage detailed explanation
Build the project Execute the command line in the...
Detailed summary of web form submission methods
Let's first look at several ways to submit a ...
10 Things Excellent Web Developers Must Know to Improve Their Development Skills
"Development is more than just writing code&q...
Vue+Element UI realizes the encapsulation of drop-down menu
This article example shares the specific code of ...