Drag & Drop Sortable List With JavaScript

 Drag & Drop Sortable List With 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. Hope you enjoy our blog so let’s start with a basic HTML structure for a Sortable List Drag & Drop.

Using CSS we present Drag & Drop Sortable List Using Html and CSS With JavaScript projects with source code available for you to copy and paste directly into your own project.

HTML Code For Drag And Drop List

Table of Contents

<!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

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

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

 

 

 

Glassmorphism Login Form | Glassmorphism Login Page Code

Now we have completed our javascript section,  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 Sortable List Drag & Drop using simple 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