Drag & Drop List or Draggable List using HTML CSS & JavaScript

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

We can also create this type of draggable card using pure JavaScript without using any library or plugin but in there we have to codes more. So using this library how we can easily create these cards or lists which can be drag and drop.

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. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

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

CSS FILE:

@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;
}

Thanks for visiting, Keep visiting.

5 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

VSDecember 9, 2020 at 10:55 AM
thank you for providing source code
MARIJEFebruary 13, 2021 at 2:26 PM
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!
AhmedMarch 19, 2021 at 12:02 PM
how can I save changed after refresh page?

Video Tutorial of Drag & Drop List or Draggable List

You might like this:

Drag & Drop List or Draggable List [Source Codes]

Thanks for visiting, Keep visiting.

5 Comments

Post a Comment

About Us

Contact Form