Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Drag and Drop List" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Drag and Drop List" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Drag and Drop List [Source Code]
To get the following HTML, CSS & JS code for the Drag and Drop List project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!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>Drag and Drop List</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<h1>Drag and Drop List</h1>
<ul class="listItems">
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/1.jpg">
<span>Developer pani</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/2.jpg">
<span>Tester Tilak</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/3.jpg">
<span>BlockChain Bharath</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/4.jpg">
<span>Hacker Harshitha</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/5.jpg">
<span>Programmer Parvathi</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/6.jpg">
<span>AI Anusha</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
<li class="item" draggable="true">
<div class="itemContent">
<img src="images/7.jpg">
<span>Designer Divya</span>
</div>
<i class="uil uil-draggabledots"></i>
</li>
</ul>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
background: lightgoldenrodyellow;
}
h1 {
font-size: 28px;
font-weight: 600;
margin-bottom: 10px;
}
.listItems {
width: 420px;
padding: 25px;
background: white;
border-radius: 7px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
list-style: none;
}
.item {
background: white;
align-items: center;
border-radius: 5px;
padding: 10px;
margin: 10px;
border: 2px solid black;
display: flex;
justify-content: space-between;
cursor: grab;
}
.item .itemContent {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.item .itemContent img {
height: 45px;
width: 45px;
border-radius: 50%;
object-fit: cover;
pointer-events: none;
}
.item .itemContent span {
font-size: 20px;
}
.item i {
color: black;
font-size: 18px;
}
.item.dragging {
opacity: 0.4;
}
.item.dragging .itemContent,
.item.dragging i {
opacity: 0;
}
JavaScript
const listItemsEl = document.querySelector(".listItems");
const itemsEl = listItemsEl.querySelectorAll(".item");
itemsEl.forEach(item => {
item.addEventListener("dragstart", () => {
setTimeout(() => item.classList.add("dragging"), 0);
});
item.addEventListener("dragend", () =>item.classList.remove("dragging"));
});
const initSortableList = (e) => {
e.preventDefault();
const draggingItem = document.querySelector(".dragging");
let siblings = [...listItemsEl.querySelectorAll(".item:not(.dragging)")];
let nextSibling = siblings.find(sibling => {
return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
});
listItemsEl.insertBefore(draggingItem, nextSibling);
}
listItemsEl.addEventListener("dragover", initSortableList);
listItemsEl.addEventListener("dragenter", e => e.preventDefault());
Generating Download Link...