Hello readers, Today in this blog you’ll learn how to create Drag & Drop List using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Responsive Counter up Animation on Scroll using HTML CSS & jQuery and now it’s time to create a Draggable List in JavaScript using SortableJS.
Drag and drop is a marking device gesture in which the user selects a virtual thing by “grabbing” it and dragging it to a separate area or onto another virtual thing. Sortable JS is a Javascript library that lets you sort or reorder lists by dragging and dropping list items.
In this program [Drag & Drop List or Draggable List], there are five lists or cards 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. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Drag & Drop List or Draggable List].
Video Tutorial of Drag & Drop List or Draggable List
In the video, you have seen the drag & drop list or draggable list and how we can easily reorder items in an unordered list. I hope you have understood the codes behind creating this program. As you know, to make an item draggable I used the JavaScript SortableJS library, so there are no vast codes for JavaScript.
You might like this:
Drag & Drop List or Draggable List [Source Codes]
To create this program (Drag & Drop Card or Draggable Card). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop Element | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.2/Sortable.min.js"></script>
</head>
<body>
<div class="wrapper">
<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>
<script>
const dragArea = document.querySelector(".wrapper");
new Sortable(dragArea, {
animation: 350
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #304B5F;
padding: 20px;
}
.wrapper{
background: #fff;
padding: 25px;
max-width: 460px;
width: 100%;
border-radius: 3px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .item{
color: #fff;
display: flex;
margin-bottom: 8px;
padding: 12px 17px;
background: #304B5F;
border-radius: 3px;
align-items: center;
justify-content: space-between;
}
.wrapper .item:last-child{
margin-bottom: 0px;
}
.wrapper .item .text{
font-size: 18px;
font-weight: 400;
}
.wrapper .item i{
font-size: 18px;
cursor: pointer;
}
That’s all, now you’ve successfully created a Drag & Drop List or Draggable List using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
how can I save changed after refresh page?
Ok I'll think about it
You're weclome
I enjoy your tutorials, and I would like to request a tutorial.
I've been searching for a quiz app tutorial (I know you have a great tutorial about this), but I need to have draggable answers.
So, when a user drags a correct answer the program marks it in green (or keeps it there) and when it is wrong, it's marked red. It would be great if wrong answers moved down with the rest of answers when it's wrong.
As said, it would be great to see this tutorial soon.
Thank you for your tutorials and your inspiration!
thank you for providing source code