我是站在巨人的肩膀上哈哈。原作者里面用的类实现，因为我需要用组件实现，所以进行了改动和备注。害怕原作者的编辑链接失效，所以记录一下。
原作者 React通过原生鼠标事件实现拖拽(drag and drop)列表重排序
根据实际情况进行改写。这里存在bug：如果列表中有输入内容，会导致不能输入等情况。应该是没有做事件捕获处理，解决了再来更。
我又来更了，找到解决方法了。用onDragStart替代onMouseDown就ok！！
这是Html 5自带的 DOM 拖放事件，可以参考如下：
但是也不能很好的解决问题，会有抖动等一系列问题。所以需要设置一个useState()。设置 draggable 规定元素是否可拖动
当鼠标移入input时设置draggable为false，不可拖动；当鼠标移出input时设置draggable为true，可拖动。
但是我这里还存在问题，关于层级的问题，还未解决：
向上移动没问题，拖动的板块至于上层
但是向下就有问题了，始终置于下层。
废话不多说，上代码
import React, {
useState } from "react";
import "./styles.css";
let list = [];
for (let i = 0; i < 10; i++) {
list.push(`item ${
i}`);
}
const DragAndDrop = () => {
const [lists, setLists] = useState(list);
/** 是否显示遮罩层，实现移动和鼠标松开 */
const [dragging, setDragging] = useState(false);
/** 设置是否可拖放 防止点击input不能长安鼠标选中 */
const [draggable, setDraggable] = useState<boolean>(true);
/** 当前索引数 */
const [draggingItemIndex, setDraggingItemIndex] = useState(-1);
/** 当前点击移动列的y轴偏