Drag & Drop Sortable List Using HTML,CSS and JavaScript

Drag & Drop Sortable List Using HTML,CSS and JavaScript

Drag & Drop Sortable List Using HTML,CSS and JavaScript

 

Drag & Drop Sortable List Using HTML,CSS and JavaScript
Drag & Drop Sortable List Using HTML,CSS and JavaScript

 

Welcome to Code With Random blog. In this blog, we learn how we create a Sortable List Drag & Drop. We use HTML, CSS, and JavaScript for this Sortable List Drag & Drop.

I hope you enjoy our blog so let’s start with a basic HTML structure for a Sortable List Drag & Drop.

HTML Code For Drag And Drop List

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<title>Sortable List Drag & Drop</title>
</head>
<body>
<h1>4 famous People</h1>
<p>Drag and drop the items into their corresponding spots</p>
<ul class="draggable-list" id="draggable-list"></ul>
<button class="check-btn" id="check">
Check Order
<i class="fa fa-paper-plane"></i>
</button>
<script src="script.js"></script>
</body>
</html>

Simple 5-Star Rating with HTML CSS

There is all the HTML code for the Sortable List Drag & Drop. Now, you can see output without CSS, then we write CSS & javascript for sortable List Drag & Drop.

output

Drag & Drop Sortable List
Drag & Drop Sortable List

How To Create New Year Countdown 2023 Using Javascript

CSS Code For Drag And Drop List

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");  
* {  
 outline: none;  
 box-sizing: border-box;  
}  
:root {  
 --border-color: #e3e5e4;  
 --background-color: #c3c7ca;  
 --text-color: #34444f;  
}  
body {  
 margin: 0;  
 background-color: #f9fafb;  
 font-family: "Open Sans", sans-serif;  
 height: 100vh;  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 justify-content: center;  
}  
body {  
 background-color: #fff;  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
 justify-content: flex-start;  
 height: 100vh;  
 margin: 0;  
 font-family: "Lato", sans-serif;  
}  
.draggable-list {  
 border: 1px solid var(--border-color);  
 color: var(--text-color);  
 padding: 0;  
 list-style-type: none;  
}  
.draggable-list li {  
 background-color: #fff;  
 display: flex;  
 flex: 1;  
}  
.draggable-list li:not(:last-of-type) {  
 border-bottom: 1px solid var(--border-color);  
}  
.draggable-list .number {  
 background-color: var(--background-color);  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 font-size: 28px;  
 height: 60px;  
 width: 60px;  
}  
.draggable-list li.over .draggable {  
 background-color: #eaeaea;  
}  
.draggable-list .person-name {  
 margin: 0 20px 0 0;  
}  
.draggable-list li.right .person-name {  
 color: #3ae374;  
}  
.draggable-list li.wrong .person-name {  
 color: #ff3838;  
}  
.draggable {  
 cursor: pointer;  
 display: flex;  
 align-items: center;  
 justify-content: space-between;  
 padding: 15px;  
 flex: 1;  
}  
.check-btn {  
 background-color: var(--background-color);  
 border: none;  
 color: var(--text-color);  
 font-size: 16px;  
 padding: 10px 20px;  
 cursor: pointer;  
}  
.check-btn:active {  
 transform: scale(0.98);  
}

Now we have completed our CSS section,  Here is our updated output CSS.

output

Drag & Drop Sortable List
Drag & Drop Sortable List

Typing with Typo Correction and Pause Css | Text Typing Effect Html

JavaScript Code For Drag And Drop List

const draggable_list = document.getElementById("draggable-list");
const check = document.getElementById("check");
const famousPeople = [
"Deepak kalal",
"Thara bhai Joginder",
"baspan ka pyaar",
"tiktok",
];
// Store listitems
const listItems = [];
let dragStartIndex;
createList();
// Insert list items into DOM
function createList() {
[...famousPeople]
.map((a) => ({ value: a, sort: Math.random() }))
.sort((a, b) => a.sort - b.sort)
.map((a) => a.value)
.forEach((person, index) => {
const listItem = document.createElement("li");
listItem.setAttribute("data-index", index);
listItem.innerHTML = `
<span class="number">${index + 1}</span>
<div class="draggable" draggable="true">
<p class="person-name">${person}</p>
<i class="fa fa-bars"></i>
</div>
`;
listItems.push(listItem);
draggable_list.appendChild(listItem);
});
addEventListeners();
}
function dragStart() {
// console.log('Event: ', 'dragstart');
dragStartIndex = +this.closest("li").getAttribute("data-index");
}
function dragEnter() {
// console.log('Event: ', 'dragenter');
this.classList.add("over");
}
function dragLeave() {
// console.log('Event: ', 'dragleave');
this.classList.remove("over");
}
function dragOver(e) {
// console.log('Event: ', 'dragover');
e.preventDefault();
}
function dragDrop() {
// console.log('Event: ', 'drop');
const dragEndIndex = +this.getAttribute("data-index");
swapItems(dragStartIndex, dragEndIndex);
this.classList.remove("over");
}
// Swap list items that are drag and drop
function swapItems(fromIndex, toIndex) {
const itemOne = listItems[fromIndex].querySelector(".draggable");
const itemTwo = listItems[toIndex].querySelector(".draggable");
listItems[fromIndex].appendChild(itemTwo);
listItems[toIndex].appendChild(itemOne);
}
// Check the order of list items
function checkOrder() {
listItems.forEach((listItem, index) => {
const personName = listItem.querySelector(".draggable").innerText.trim();
if (personName !== famousPeople[index]) {
listItem.classList.add("wrong");
} else {
listItem.classList.remove("wrong");
listItem.classList.add("right");
}
});
}
function addEventListeners() {
const draggables = document.querySelectorAll(".draggable");
const dragListItems = document.querySelectorAll(".draggable-list li");
draggables.forEach((draggable) => {
draggable.addEventListener("dragstart", dragStart);
});
dragListItems.forEach((item) => {
item.addEventListener("dragover", dragOver);
item.addEventListener("drop", dragDrop);
item.addEventListener("dragenter", dragEnter);
item.addEventListener("dragleave", dragLeave);
});
}
check.addEventListener("click", checkOrder);

 

Final output

Drag & Drop Sortable List
Drag & Drop Sortable List

 

 

Drag & Drop Sortable List
Drag & Drop Sortable List

 

Glassmorphism Login Form | Glassmorphism Login Page Code

Now we have completed our Drag & Drop Sortable List. Here is our updated output with javascript. Hope you like the Sortable List Drag & Drop. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

In this post, we learn how to create a Drag & Drop Sortable List Using HTML,CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki
Code by – traversy media



Leave a Reply