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
Detailed process of FastAPI deployment on Docker
Docker Learning https://www.cnblogs.com/poloyy/p/...
Vue defines private filters and basic usage
The methods and concepts of private filters and g...
mysql5.7 remote access settings
Setting up remote access in mysql5.7 is not like ...
Problems and solutions encountered when deploying a project when upgrading the Mysql database from version 5.6.28 to version 8.0.11
The problems and solutions encountered when deplo...
The simplest form implementation of Flexbox layout
Flexible layout (Flexbox) is becoming increasingl...
Detailed explanation of the standard MySQL (x64) Windows version installation process
MySQL x64 does not provide an installer, does not...
Docker uses the mysqldump command to back up and export mysql data in the project
mysqldump command Introduction: A database backup...
How to create a test database with tens of millions of test data in MySQL
Sometimes you need to create some test data, base...
A brief discussion on the problem of forgotten mysql password and login error
If you forget your MySQL login password, the solu...
Detailed process of configuring Https certificate under Nginx
1. The difference between Http and Https HTTP: It...
How to use the debouce anti-shake function in Vue
Table of contents 1. Anti-shake function 2. Use d...
MySQL configuration master-slave server (one master and multiple slaves)
Table of contents Ideas Host Configuration Modify...
IIS and APACHE implement HTTP redirection to HTTPS
IIS7 Download the HTTP Rewrite module from Micros...
Example code for implementing 3D Rubik's Cube with CSS
Let's make a simple 3D Rubik's Cube today...
Complete steps to use element in vue3.0
Preface: Use the element framework in vue3.0, bec...