实现一个函数 拖拽排序

推荐答案

// www.javascriptcn.com code example
function dragSort(container) {
  let draggingElement = null;

  container.addEventListener('dragstart', (e) => {
    draggingElement = e.target;
    e.target.style.opacity = '0.4';
  });

  container.addEventListener('dragover', (e) => {
    e.preventDefault();
    const afterElement = getDragAfterElement(container, e.clientY);
    if (afterElement == null) {
      container.appendChild(draggingElement);
    } else {
      container.insertBefore(draggingElement, afterElement);
    }
  });

  container.addEventListener('dragend', (e) => {
    e.target.style.opacity = '1';
  });

  function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];

    return draggableElements.reduce((closest, child) => {
      const box = child.getBoundingClientRect();
      const offset = y - box.top - box.height / 2;
      if (offset < 0 && offset > closest.offset) {
        return { offset: offset, element: child };
      } else {
        return closest;
      }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
  }
}

// 使用示例
const container = document.querySelector('.container');
dragSort(container);

本题详细解读

1. 功能描述

拖拽排序功能允许用户通过拖拽元素来重新排列列表中的项目。这个功能在前端开发中非常常见，特别是在需要用户自定义顺序的场景中，如任务管理、图片排序等。

2. 实现思路

• dragstart 事件：当用户开始拖拽一个元素时，记录当前被拖拽的元素，并设置其透明度为 0.4，以表示正在拖拽。
• dragover 事件：当拖拽的元素在容器内移动时，计算当前鼠标位置相对于其他元素的位置，找到最接近的元素，并将拖拽的元素插入到该元素之前或之后。
• dragend 事件：当拖拽结束时，恢复被拖拽元素的透明度为 1。
• getDragAfterElement 函数：用于计算当前鼠标位置相对于其他元素的位置，找到最接近的元素。

3. 代码解析

• dragstart 事件：通过 e.target 获取当前被拖拽的元素，并设置其透明度。
• dragover 事件：通过 e.preventDefault() 阻止默认行为，调用 getDragAfterElement 函数找到最接近的元素，并将拖拽的元素插入到该元素之前或之后。
• dragend 事件：恢复被拖拽元素的透明度。
• getDragAfterElement 函数：通过 getBoundingClientRect() 获取每个元素的位置信息，计算鼠标位置与元素中心的偏移量，找到最接近的元素。

4. 使用示例

• 在 HTML 中，确保容器内的每个可拖拽元素都有 draggable="true" 和 class="draggable" 属性。
• 调用 dragSort 函数，传入容器元素即可实现拖拽排序功能。

<div class="container">
  <div class="draggable" draggable="true">Item 1</div>
  <div class="draggable" draggable="true">Item 2</div>
  <div class="draggable" draggable="true">Item 3</div>
</div>