一篇文带你使用js实现拖拽排序

// 引入必要的库
import { useRef, useState } from 'react';
 
// 创建一个可拖拽排序的Hook
function useDragSortable(items) {
  const [list, setList] = useState(items);
  const refs = useRef([]);
 
  const dragStart = (index, event) => {
    refs.current = list.map(() => false);
    refs.current[index] = true;
    event.dataTransfer.effectAllowed = 'move';
  };
 
  const dragEnter = (index, event) => {
    event.preventDefault();
    refs.current[index] = true;
  };
 
  const dragOver = (event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  };
 
  const dragEnd = (index, event) => {
    event.preventDefault();
    refs.current = list.map(() => false);
  };
 
  const drop = (index, event) => {
    event.preventDefault();
    const oldIndex = refs.current.findIndex(bool => bool);
    const newList = [...list];
    const [removed] = newList.splice(oldIndex, 1);
    newList.splice(index, 0, removed);
    setList(newList);
  };
 
  return { list, dragStart, dragEnter, dragOver, dragEnd, drop };
}
 
// 使用Hook
const items = ['Item 1', 'Item 2', 'Item 3'];
const { list, dragStart, dragEnter, dragOver, dragEnd, drop } = useDragSortable(items);
 
// 渲染列表
list.map((item, index) => (
  <div
    key={item}
    draggable
    onDragStart={(e) => dragStart(index, e)}
    onDragEnter={(e) => dragEnter(index, e)}
    onDragOver={dragOver}
    onDragEnd={(e) => dragEnd(index, e)}
    onDrop={(e) => drop(index, e)}
    style={{ cursor: 'move' }}
  >
    {item}
  </div>
));

这段代码定义了一个名为useDragSortable的Hook，它允许用户通过拖拽来对一个列表进行排序。它使用了React的useRef和useState钩子，并通过一系列事件处理函数(dragStart, dragEnter, dragOver, dragEnd, drop)实现了拖拽功能。这是一个很好的学习示例，展示了如何在React函数组件中实现拖拽排序功能。