Sortable List Drag & Drop | Drag Drop using html css javascript – codewithrandom







Sortable List Drag & Drop | Drag Drop using html css javascript – codewithrandom 

Welcome🎉 to Code With Random blog. In this blog, we learn that 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.

HTML code

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

There is all 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

Sortable List Drag & Drop | Drag Drop using html css javascript - codewithrandom

CSS Code

 @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

Sortable List Drag & Drop | Drag Drop using html css javascript - codewithrandom

Javascript code 

 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

Sortable List Drag & Drop | Drag Drop using html css javascript - codewithrandom

Sortable List Drag & Drop | Drag Drop using html css javascript - codewithrandom

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

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.

Written by – Code With Random/Anki 

Code by – traversy media

Check out more…..

Share on:

Leave a Comment