Drag & Drop List using HTML CSS & JavaScript With Source Code to Build your Skills
in this blog you’ll learn how to create Drag & Drop List using HTML CSS & JavaScript by using Sortable JS. Sortable JS is a Javascript library that enables you to sort lists by dragging and dropping list items.
In this project, there are five lists on the webpage and these are draggable items or lists. Users can easily reorder the items in an underorder list, giving users a visual dimension to particular actions and modifications.
First, create an HTML file with the name index.html and paste the given codes into your HTML file.
<!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 & Drop List</title>
<!-- Css link -->
<link rel="stylesheet" href="style.css">
<!-- fontawsom -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Sortable js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js" integrity="sha512-Eezs+g9Lq4TCCq0wae01s9PuNWzHYoCMkE97e2qdkYthpI0pzC3UGB03lgEHn2XM85hDOUF6qgqqszs+iXU4UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container">
<div class="element">
<span>Element one</span>
<i class="fa-solid fa-bars"></i>
</div>
<div class="element">
<span>Element Two</span>
<i class="fa-solid fa-bars"></i>
</div>
<div class="element">
<span>Element Three </span>
<i class="fa-solid fa-bars"></i>
</div>
<div class="element">
<span>Element Four</span>
<i class="fa-solid fa-bars"></i>
</div>
<div class="element">
<span>Element Five</span>
<i class="fa-solid fa-bars"></i>
</div>
</div>
<script>
const Dragarea = document.querySelector(".container");
new Sortable(Dragarea , {
animation: 400
})
</script>
</body>
</html>Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #709d96;
}
.container{
background-color: #fff;
width: 500px;
border-radius: 5px;
padding: 20px;
}
.element{
display: flex;
justify-content: space-between;
background-color: #709d96;
padding: 15px;
margin-bottom: 7px;
color: white;
font-size: 17px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
}
That’s all 🙂
