Drag & Drop List using HTML CSS & JavaScript | Draggable List in JavaScript

In this Video you’ll learn how to create Drag & Drop List using HTML CSS & JavaScript. 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.

Source Code:

HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag & Drop Element</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;
}

Download Code Files

Subscribe : https://www.youtube.com/channel/UCk7xIEmd3MeyhIu2StLX5yA

#html #css #javascript