How to create draggable/sortable list using JavaScript
Posted on March 1, 2021, 8 p.m. by Bishal ( 9213)
Hi Everyone, Code With Bishal is back with a new project. So grab your PC and open your favourite Code Editor and start coding with me. In this blog, we will make a Sortable/Draggable list using the Sortable JS library. Whether you are building a simple list, shared list or shopping cart, the Sortable JS improves the Interaction and Experience of the user. Continue reading this blog to take a demo of the Sortable list. All the downloadable resources are attached to this blog, You can easily download these with the help of the buttons below.
So, How we will create our draggable list?
According to the docs, to create a simple draggable list we have to use the following code.
new Sortable(example1, {
animation: 150
});
Where example1 is the ID of the container containing the list items, and animation is the animation duration in ms.
Shared list example usage:
new Sortable(example2Left, {
group: 'shared', // set both lists to same group
animation: 150
});
new Sortable(example2Right, {
group: 'shared',
animation: 150
});
where example2Left and example2Right are the IDs of the container containing the list.
Screenshots
In this blog, We will continue with the Simple Draggable List. First of all, we will declare a variable container with the id of the container:
var container = document.getElementById("container")
The final JavaScript code is:
new Sortable(container, {
animation: 150
});
Demo
Draggable Element One
Draggable Element Two
Draggable Element Three
Draggable Element Four
Draggable Element Five
Draggable Element Six
Draggable Element Seven
Draggable Element Eigth
Step by step guide to create draggable list using JavaScript:
-
Create a file with the name
index.html -
Open
index.html -
Add the Broiler plate of HTML
Broiler Plate of HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<title>Draggable Lists with Javascript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
</body>
</html>
-
Now, inside the container, we will add the div items which will work as a draggable list.
<div class="container" id="container">
<div class="item">
<span class="text">Draggable Element One </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Two </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Three </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Four </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Five </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Six </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Seven </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Eigth </span>
<i class="fas fa-bars"> </i>
</div>
</div>
-
Create a file
script.js -
Link External JavaScript file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<script src="script.js"></script>
Now add some JavaScript code to the script.js file:
var container = document.getElementById("container")
new Sortable(container, {
animation: 150
});
-
Create a file
style.css -
Link External CSS file with your HTML file
Here is how can you link:
Add these code in the <head> </head> of your HTML document:
<link href="style.css" rel="stylesheet">
Now add some CSS code to the style.css file:
.container{
padding: 25px;
max-width: 800px;
border-radius: 20px;
margin: 100px auto;
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.container .item{
color: #FFF;
align-items: center;
display: flex;
margin-bottom: 20px;
padding: 12px 17px;
background:#34568B;
border-radius:100px;
justify-content: space-between;
font-size: 30px;
}
Source Code
1) HTML Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<title>Draggable Lists with Javascript - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com
-->
<body>
<div class="container" id="container">
<div class="item">
<span class="text">Draggable Element One </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Two </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Three </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Four </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Five </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Six </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Seven </span>
<i class="fas fa-bars"> </i>
</div>
<div class="item">
<span class="text">Draggable Element Eigth </span>
<i class="fas fa-bars"> </i>
</div>
</div>
</body>
</html>
2) CSS Code:
.container{
padding: 25px;
max-width: 800px;
border-radius: 20px;
margin: 100px auto;
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}
.container .item{
color: #FFF;
align-items: center;
display: flex;
margin-bottom: 20px;
padding: 12px 17px;
background:#34568B;
border-radius:100px;
justify-content: space-between;
font-size: 30px;
}
3) JavaScript Code:
var container = document.getElementById("container")
new Sortable(container, {
animation: 150
});