JS implements the dragging and placeholder functions of elements
|
This blog post is about a difficulty encountered in a project that the blogger has just worked on a few days ago. After learning this, you can easily move page elements. Combined with some conditions, you can make a page with task completion progress!
Let’s take a look at the effect first:
Functionality:Drag an element from one section to a certain position in another section . The blogger made this according to his own needs. The clicked element can only be moved to the next module of the module where it is located. If it is moved to another module, it will return to the original position. And when the position of the element you drag does not exceed a certain distance, it will automatically bounce back to the original position Case Study:The key step is this! When you press the mouse, not only the current element but also the current module is obtained (so at the beginning, an index attribute must be set for each module, and the attribute value is the index number of each module itself). This step is to determine whether the module to be moved to is the next module of the current module when the mouse is released (it may be a bit confusing, read it carefully). If the condition is met, then it is necessary to start comparing the position with the elements in the module to be moved to one by one (here is to determine the specific position where the element is to be moved). After confirmation, a new empty element must be created at the specific position, and the content of the moved element must be added to this empty element. This is the last step! Don't forget to remove the original element. Code presentation: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
left: 0;
list-style: none;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: space-around;
width: 1000px;
height: 600px;
margin: 100px auto;
padding: 0;
}
.container li {
width: 180px;
height: 100%;
background-color: plum;
border-radius: 10px;
padding: 5px;
}
.item {
width: 170px;
height: 100px;
background-color: salmon;
margin: 5px 0;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="container">
<li>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</li>
<li>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</li>
<li>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</li>
<li></li>
<li></li>
</ul>
<script>
$(function(){
for (var i = 0; i < 5; i++) {
$(".container li")[i].setAttribute('index', i);
}
$('.item').on('mousedown',function(e){
var index = Number($(this).parent()[0].getAttribute('index'));
//Get the left and top margins of the currently selected task startLeft = $(this).offset().left;
startTop = $(this).offset().top;
//Find the position of the mouse in the selected task mouseX = e.pageX - startLeft;
mouseY = e.pageY - startTop;
$(this).on('mousemove',function(e){
$(this).offset({
left: e.pageX - mouseX,
top: e.pageY - mouseY
})
})
$(this).on('mouseup',function(){
//Used to record the position where the item moves k = -1;
$(this).off('mousemove');
//Get the next module index of the selected module if (index >= 4) {
index = 3;
}
var next = $('.container li').eq(index + 1);
//If the distance moved to when the mouse is released is exactly within the range of the next module of the selected module, execute if ($(this).offset().left >= next.offset().left&&$(this).offset().left <= next.offset().left + next[0].offsetWidth) {
//Get the content of the selected item var text = $(this).html();
//Create an empty task at the final location, and then add the acquired content into it var father = document.createElement('div');
father.className = 'item';
$(father).append(text);
//Get the current element clicked var ele = $(this);
//If the current module has no item, add it to the first position directly. If it has, compare its top to the one with a larger size and put it behind it if (next.children().length == 0) {
next.append(father);
} else {
$.each(next.children(), function (i,item) {
if (ele.offset().top > $(item).offset().top) {
k = i;
}
})
//If k == -1, it means to put the task in the first position of the module if (k == -1) {
next.children().eq(0).before(father);
} else {
next.children().eq(k).after(father);
}
}
//Unbind the move event and clear the item at the original location
$(this).off("mousemove");
$(this).remove();
$(this).empty();
} else {
//Here the move failed and returned to the original position $(this).offset({
left: startLeft,
top: startTop
})
$(this).off("mousemove");
}
})
})
})
</script>
</body>
</html>Extensions:This case, combined with background data, can realize the display and drag effect of multiple tasks with different progress, as shown in the following figure:
Roll up quickly~
This is the end of this article about JS implementation of element dragging and placeholder functions. For more relevant JS element dragging and placeholder 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:
|
<<: Implementation of building Kubernetes cluster with VirtualBox+Ubuntu16
>>: HTML tutorial: How to modify image size, alignment, spacing and border attributes
Recommend
HTML tag meta summary, HTML5 head meta attribute summary
Preface meta is an auxiliary tag in the head area...
Detailed explanation of how to install MySQL on Alibaba Cloud
As a lightweight open source database, MySQL is w...
Installation tutorial of mysql5.7.21 decompression version under win10
Install the unzipped version of Mysql under win10...
Solve the problems encountered when installing mysql-8.0.11-winx64 in Windows environment
Download the MySQL installation package. I downlo...
Detailed explanation of the difference between v-model directive and .sync modifier in Vue
Table of contents v-model .sync The difference in...
Node uses async_hooks module for request tracking
The async_hooks module is an experimental API off...
Detailed explanation of destructuring assignment syntax in Javascript
Preface The "destructuring assignment syntax...
CSS implements Google Material Design text input box style (recommended)
Hello everyone, today I want to share with you ho...
mysql8 Common Table Expression CTE usage example analysis
This article uses an example to describe how to u...
VMware Workstation Pro 16 License Key with Usage Tutorial
VMware Workstation is a powerful desktop virtual ...
A brief analysis of the knowledge points of exporting and importing MySQL data
Often, we may need to export local database data ...
How to implement email alert in zabbix
Implemented according to the online tutorial. zab...
Solution for importing more data from MySQL into Hive
Original derivative command: bin/sqoop import -co...
Detailed explanation of Linux text editor Vim
Vim is a powerful full-screen text editor and the...
Implementation of vscode custom vue template
Use the vscode editor to create a vue template, s...