// 引入必要的库
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函数组件中实现拖拽排序功能。