如何用 JS 实现拖拽排序

前端

2024-02-24 15:57:54

前言

拖拽排序对于前端工程师来说应该不陌生，平时工作的时候，可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后，大家有没有想过拖拽排序是如何实现的呢？我花了点时间研究了一下，并写了这篇文章，希望能对大家有所帮助。

拖拽排序的基本原理

拖拽排序的基本原理是，当用户点击并拖动某个元素时，该元素的样式会发生变化，使其看起来像是被拖动。同时，页面上的其他元素也会做出相应的调整，以便为被拖动的元素腾出空间。当用户松开鼠标时，被拖动的元素会被放置到新的位置。

如何用 JS 实现拖拽排序

为了实现拖拽排序，我们需要使用 JavaScript 来操纵元素的样式和位置。具体步骤如下：

首先，我们需要给要进行拖拽排序的元素添加一个拖拽事件监听器。当用户点击并拖动元素时，该事件监听器会被触发。
在事件监听器中，我们需要获取被拖动的元素的ID或其他唯一标识符。
然后，我们需要获取所有其他元素的ID或其他唯一标识符。
接下来的步骤根据算法，进行排序，这里我采用较为简单的算法，计算被拖动的元素与其他元素之间的距离，并找到距离最近的元素。
找到距离最近的元素后，我们需要交换这两个元素的位置。
最后，我们需要更新所有元素的样式，使其看起来像是已经排序好。

完整的实现范例

下面是一个完整的拖拽排序的实现范例：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    li {
      margin: 5px;
      padding: 5px;
      border: 1px solid black;
      background-color: #eee;
    }
    .dragging {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

  <script>
    const sortable = document.getElementById("sortable");
    const items = sortable.querySelectorAll("li");

    items.forEach((item) => {
      item.addEventListener("dragstart", (event) => {
        event.dataTransfer.setData("text/plain", item.id);
        item.classList.add("dragging");
      });

      item.addEventListener("dragend", (event) => {
        item.classList.remove("dragging");
      });
    });

    sortable.addEventListener("dragover", (event) => {
      event.preventDefault();
    });

    sortable.addEventListener("drop", (event) => {
      event.preventDefault();

      const draggedItemId = event.dataTransfer.getData("text/plain");
      const draggedItem = document.getElementById(draggedItemId);

      const closestItem = getClosestItem(draggedItem, items);

      if (closestItem) {
        sortable.insertBefore(draggedItem, closestItem);
      } else {
        sortable.appendChild(draggedItem);
      }
    });

    function getClosestItem(draggedItem, items) {
      let closestItem = null;
      let closestDistance = Infinity;

      items.forEach((item) => {
        if (item === draggedItem) {
          return;
        }

        const distance = getDistance(draggedItem, item);

        if (distance < closestDistance) {
          closestItem = item;
          closestDistance = distance;
        }
      });

      return closestItem;
    }

    function getDistance(item1, item2) {
      const rect1 = item1.getBoundingClientRect();
      const rect2 = item2.getBoundingClientRect();

      const dx = rect1.x - rect2.x;
      const dy = rect1.y - rect2.y;

      return Math.sqrt(dx * dx + dy * dy);
    }
  </script>
</body>
</html>