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