Drag and Drop Sortable List using HTML, CSS, and JavaScript

Drag and drop is an interactive feature for a sortable list where the user is allowed to reorder elements in a list by simply dragging and dropping them. If your web application has reordering functionality, the drag-and-drop feature helps to sort list items in a user-friendly way.

In this example code snippet, we will show you how to create drag and drop sortable list using JavaScript. This drag and drop sortable list can be used for reordering elements in HTML with JavaScript. Let’s build drag and drop sortable list using HTML, CSS, and JavaScript.

HTML Code:

Define HTML structure for sortable list.

• We have used HTML <ul> tag to create an unordered list and list items with <li> tags.
• In list items (<li>), the draggable attribute is set to true to make them draggable.

<ul class="sortable-list">
  <li class="item" draggable="true">
      <div class="cont">
          <img src="images/img1.jpg">
          <span>Item 1</span>
      </div>
  </li>
  <li class="item" draggable="true">
      <div class="cont">
          <img src="images/img2.jpg">
          <span>Item 2</span>
      </div>
  </li>
  <li class="item" draggable="true">
      <div class="cont">
          <img src="images/img3.jpg">
          <span>Item 3</span>
      </div>
  </li>
  <li class="item" draggable="true">
      <div class="cont">
          <img src="images/img4.jpg">
          <span>Item 4</span>
      </div>
  </li>
  <li class="item" draggable="true">
      <div class="cont">
          <img src="images/img5.jpg">
          <span>Item 5</span>
      </div>
  </li>
  <li class="item" draggable="true">
      <div class="cont">
          <img src="images/img6.jpg">
          <span>Item 6</span>
      </div>
  </li>
</ul>

CSS Code:

Define CSS rules to style the list items that make the interface visually appealing.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #2CAAEB;
}
.sortable-list {
  width: 425px;
  padding: 25px;
  background: #fff;
  padding: 30px 25px 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.sortable-list .item {
  list-style: none;
  display: flex;
  cursor: move;
  background: #fff;
  align-items: center;
  border-radius: 5px;
  padding: 10px 13px;
  margin-bottom: 11px;
  border: 1px solid #ccc;
  justify-content: space-between;
}
.item .cont {
  display: flex;
  align-items: center;
}
.item .cont img {
  height: 43px;
  width: 43px;
  pointer-events: none;
  margin-right: 12px;
  object-fit: cover;
  border-radius: 50%;
}
.item .cont span {
  font-size: 1.13rem;
}
.item.dragging {
  opacity: 0.6;
}
.item.dragging :where(.cont, i) {
  opacity: 0;
}

JavaScript Code:

Add the following JavaScript code to implement the drag and drop feature to sortable list items.

• The dragstart, dragend, dragover, and dragenter event listeners are used to handle the drag-and-drop sortable operation using JavaScript.

const sortableList = document.querySelector(".sortable-list");
const items = sortableList.querySelectorAll(".item");

items.forEach(item => {
    // Add dragging class to item on dragstart event
    item.addEventListener("dragstart", () => {
        setTimeout(() => item.classList.add("dragging"), 0);
    });

    // Remove dragging class from item on dragend event
    item.addEventListener("dragend", () => item.classList.remove("dragging"));
});

const initSortableList = (e) => {
    e.preventDefault();
    const draggingItem = document.querySelector(".dragging");

    // Select all items except currently dragging and making an array of them
    let siblings = [...sortableList.querySelectorAll(".item:not(.dragging)")];

    // Find the sibling after which the dragging item would be placed
    let nextSibling = siblings.find(sibling => {
        return e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2;
    });

    // Insert the dragging item before the found sibling
    sortableList.insertBefore(draggingItem, nextSibling);
}

// Attach event handlers to sortable list
sortableList.addEventListener("dragover", initSortableList);
sortableList.addEventListener("dragenter", e => e.preventDefault());