Do you want to improve the user experience of your online application by adding a Drag and Drop Sortable List? This popular UI element allows users to reorganize things by dragging and dropping them to the desired place. We will walk you through the stages of constructing a Drag and Drop Sortable List with HTML, CSS, and JavaScript in this detailed guide.
You will obtain a better knowledge of fundamental concepts such as DOM manipulation, event handling, and array manipulation by following our step-by-step instructions. We will not need any additional JavaScript libraries to construct the sortable list, which makes our method unique. This will provide you with more freedom and control over your code.
Drag and Drop Sortable Lists are a common feature in many web applications, such as task organisers and e-commerce websites. You may drastically improve the user experience and make your website more intuitive and interactive by incorporating this functionality.
Source Code For Drag and Drop Sortable List using HTML CSS & JavaScript: A Comprehensive Guide:
We will create three files for it. HTML, CSS, and JS files. I use iconsquote.com web font icons in it as shown in the above image.
Step One: Create and index.html file with the extension .html
<!DOCTYPE html>
<!-- By Hassan Ali | Hassanrao.com -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Draggable List JavaScript | Hassanrao.com</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<script src="script.js" defer></script>
</head>
<body>
<ul class="sortable-list">
<li class="item" draggable="true">
<div class="details">
<i class="uil uil-amazon brand-icon"></i>
<span>Amazon</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="details">
<i class="uil uil-apple brand-icon"></i>
<span>Apple</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="details">
<i class="uil uil-facebook-f brand-icon"></i>
<span>Facebook</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="details">
<i class="uil uil-google brand-icon"></i>
<span>Google</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="details">
<i class="uil uil-microsoft brand-icon"></i>
<span>Microsoft</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<p>Default Arranged As ( A - Z )</p>
</ul>
</body>
</html>
Step Two: Create and style.css file with the extension .css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
p{
text-align:center;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5E17EC;
}
.sortable-list {
width: 425px;
background: rgba(255,255,255,0.9);
border-radius: 7px;
padding: 30px 25px 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.sortable-list .item {
list-style: none;
display: flex;
cursor: move;
background: rgba(255,255,255,0.99);
align-items: center;
border-radius: 5px;
padding: 10px 13px;
margin-bottom: 11px;
/* box-shadow: 0 2px 4px rgba(0,0,0,0.06); */
border: 1px solid #ccc;
justify-content: space-between;
}
.item .details {
display: flex;
align-items: center;
}
.item .details i.brand-icon {
padding:5px;
margin-right: 12px;
border-radius: 50%;
}
.item .details span {
font-size: 1.13rem;
}
.item i {
color: #474747;
font-size: 1.13rem;
}
.item.dragging {
opacity: 0.6;
}
.item.dragging :where(.details, i) {
opacity: 0;
}
Last Step: Create and script.js file with the extension .js
const sortableList = document.querySelector(".sortable-list");
const items = sortableList.querySelectorAll(".item");
items.forEach(item => {
item.addEventListener("dragstart", () => {
// Adding dragging class to an item after a delay
setTimeout(() => item.classList.add("dragging"), 0);
});
// Removing dragging class from the item on the dragend event
item.addEventListener("dragend", () => item.classList.remove("dragging"));
});
const initSortableList = (e) => {
e.preventDefault();
const draggingItem = document.querySelector(".dragging");
// Getting all items except currently dragging and making an array of them
let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")];
// Finding the sibling after which the dragging item should be placed
let nextSibling = siblings.find(sibling => {
return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
});
// Inserting the dragging item before the found sibling
sortableList.insertBefore(draggingItem, nextSibling);
}
sortableList.addEventListener("dragover", initSortableList);
sortableList.addEventListener("dragenter", e => e.preventDefault());
You have successfully developed a Drag and Drop Sortable List with HTML, CSS, and JavaScript. You can also edit the code to fit your individual needs and make it more touch-friendly.
If you encounter any problems or your code is not working as expected, don’t worry. I provide a free download of the source code files for this project. Simply click on the download button to get the zip file containing the project folder with source code files.
Conclusion:
A Drag and Drop Sortable List is an excellent place to start if you want to improve the user experience of your web application. By following my comprehensive guide, you will have all the tools you need to develop this popular UI element in HTML, CSS, and JavaScript.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)