让元素像搭积木一样轻松排序：拖拽排序指南

前端

2023-09-23 01:01:24

如何实现拖拽排序：一步步进阶指南

导言

拖拽排序，也称拖动排序，是一种交互式功能，允许用户通过鼠标或触控设备拖动和重新排列元素。这种直观且用户友好的方法广泛应用于各种数字界面，从简单的九宫格到复杂的待办事项列表。

理解拖拽原理

当鼠标在目标元素上按下时，浏览器会触发一个事件。我们利用这一事件来触发一个监听器函数，该函数负责跟踪鼠标指针在页面上的移动。当鼠标指针与另一个元素重叠时，监听器会检测到这一点并触发相应动作，如元素交换或移动。

步骤 1：创建可拖拽元素

首先，我们需要创建可以拖动的元素。可以使用 <div> 或 <li> 等 HTML 元素，并通过 CSS 样式为其添加背景色、边框和适当的尺寸。为了方便拖动，可以在每个元素上添加一个手柄，可以通过额外的 CSS 类来实现。

.draggable {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #000;
  cursor: grab;
}

步骤 2：添加拖拽监听器

接下来，我们需要为可拖拽元素添加一个拖拽监听器。当用户按下鼠标时，该监听器将触发。

const draggables = document.querySelectorAll('.draggable');

draggables.forEach((draggable) => {
  draggable.addEventListener('mousedown', startDrag);
});

步骤 3：开始拖动

在 startDrag 函数中，我们将记录鼠标的起始位置并创建元素克隆，该克隆将跟随鼠标指针移动。

function startDrag(e) {
  e.preventDefault();
  
  const clone = e.target.cloneNode(true);
  clone.classList.add('dragging');
  document.body.appendChild(clone);
  
  const mouseStartX = e.clientX;
  const mouseStartY = e.clientY;
  
  const cloneStartX = clone.offsetLeft;
  const cloneStartY = clone.offsetTop;
}

步骤 4：更新克隆的位置

在 mousemove 函数中，我们将更新克隆的位置以匹配鼠标指针的移动。

document.addEventListener('mousemove', moveDrag);

function moveDrag(e) {
  const clone = document.querySelector('.dragging');
  
  if (!clone) return;
  
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  
  clone.style.left = `${mouseX - cloneStartX}px`;
  clone.style.top = `${mouseY - cloneStartY}px`;
}

步骤 5：交换元素（可选）

为了支持元素的交换，我们需要检测克隆是否与其他可拖拽元素重叠。如果重叠，我们交换它们的顺序。

const droppables = document.querySelectorAll('.draggable');

droppables.forEach((droppable) => {
  droppable.addEventListener('dragover', handleDragOver);
});

function handleDragOver(e) {
  const clone = document.querySelector('.dragging');
  
  if (!clone) return;
  
  if (e.target !== clone) {
    const droppableRect = e.target.getBoundingClientRect();
    const cloneRect = clone.getBoundingClientRect();
    
    if (isOverlapping(droppableRect, cloneRect)) {
      e.preventDefault();
      swapElements(e.target, clone);
    }
  }
}

步骤 6：完成拖动

在 mouseup 函数中，我们将移除克隆并更新原始元素的位置。

document.addEventListener('mouseup', endDrag);

function endDrag() {
  const clone = document.querySelector('.dragging');
  
  if (!clone) return;
  
  clone.remove();
}