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
JavaScript to achieve the effect of clicking on the self-made menu
This article shares the specific code of JavaScri...
Correct way to write empty links to prevent page jumps after clicking a href # problem
Sometimes you need to use links, but you don't...
A detailed introduction to HTML page loading and parsing process
The order in which the browser loads and renders H...
Vue implements the requirement of dragging and dropping dynamically generated components
Table of contents Product Requirements Ideas Prob...
Detailed explanation of the application of the four states of hyperconnection
Although you think it may be a browser problem, i...
abbr mark and acronym mark
The <abbr> and <acronym> tags represen...
A brief discussion on the optimization of MySQL paging for billions of data
Table of contents background analyze Data simulat...
Analysis of the usage of replace and regexp for regular expression replacement in MySQL
This article uses examples to illustrate the use ...
Vue's vue.$set() method source code case detailed explanation
In the process of using Vue to develop projects, ...
Super detailed MySQL usage specification sharing
Recently, there have been many database-related o...
How to prevent Flash from covering HTML div elements
Today when I was writing a flash advertising code,...
HTML code example: detailed explanation of hyperlinks
Hyperlinks are the most frequently used HTML elem...
Implementation of select multiple data loading optimization in Element
Table of contents Scenario Code Implementation Su...
13 Most Frequently Asked Vue Modifiers in Interviews
Table of contents 1. lazy 2.trim 3.number 4.stop ...
Brief analysis of MySQL union and union all
In the database, both UNION and UNION ALL keyword...