React-自定义一个交换类型拖放

前言

本质上是实现一个矩形内的列表进行数据交换，并配套必要的样式。
交换类型拖放具体分为三部分

鼠标点击某个元素
鼠标拖动该元素
拖到另外一个元素的上面后，鼠标松开并与之交换位置

实现

必要的数据预定义

/** 必要参数，可考虑从外部接收* lineHeight是单格高度* lineWidth是单格宽度* lineNumber是一行的最大个数* proportion 是交换位置的最低比例*/const lineHeight:number = 40;const lineWidth:number = 102 ;const lineNumber:number = 5;const proportion:number = 0.6;

第一步鼠标点击某个元素

这个很简单，只要监听鼠标点击事件就行了。

onMouseDown={e => handleMouseDown(e, index)}

同时需要对拖放过程中需要用到的数据进行初始化。

const handleMouseDown = (e: React.MouseEvent, index: number) => {      setDragging(true);      setDraggingIndex(index);      setStartPage({"x": e.pageX,"y": e.pageY});  }

为了让使用者看出来进入了拖放模式，样式也需要微调（具体想成什么样子可以自定义）

style={getDraggingStyle(index)}`

需要注意的是，拖放的样式效果会在这通过借助transform的偏移实现

const getDraggingStyle = (index: number) => {    if(index !== draggingIndex) {      return;    }    return {        transform:`translate(${offsetPage.x}px,${offsetPage.y}px),        opacity:0.5,    }  }

第二步鼠标拖动该元素

关键点有两点

1. 是如何移动

之前已经提到过了实现方式是transform的偏移，其中的变量则是可以通过监听鼠标移动事件。

onMouseMove={e => handleMouseMove(e)}

并在移动过程中计算偏移量，包括X轴（左右）和Y轴（上下）

  const handleMouseMove = (e: React.MouseEvent) => {      setOffsetPage({"x": e.pageX - startPage.x, "y": e.pageY - startPage.y});  }

2. 在哪里移动

为方便移动过程中不受到其他因素干扰，可以创建一个覆盖层，元素在覆盖层上移动。覆盖层随移动而生，随放下而去。

{dragging && (        <div           className="drag-mask"          onMouseMove={e => handleMouseMove(e)}          onMouseUp={e => handleMouseUp(e)}        />      )}

覆盖层的CSS

.drag-mask {  position: fixed;  left: 0;  right: 0;  top: 0;  bottom: 0;  background:rgba(0, 0, 0, 0);}

第三步鼠标松开并与之交换位置

关键点有两点

1. 移动位置

之前的偏移位置是实时计算出来的，正负代表方向，大小表示距离。
移动的位置在第一步就定义了，还需要的是被交换元素的位置。
这里用最少移动距离来判断是哪个元素需要被交换。举例来说，如果一个方向上移动的距离没有超过一个元素的一半距离（proportion，可自定义），则和前一个元素交换，否则和当前元素交换。

let leastX = lineWidth * proportion; //X轴最少移动距离let leastY = lineHeight * proportion; //Y轴最少移动距离

之前的移动格数用向下取整就可以获得

let offsetNumberX = Math.floor(Math.abs(lengthX / lineWidth)); //X轴移动格数let offsetNumberY = Math.floor(Math.abs(lengthY / lineHeight)); //Y轴移动格数

最后的计算

if(offsetLastX >= leastX) {  offsetNumberX++;}if(offsetLastY >= leastY){  offsetNumberY++;}

2. 边界条件

1. 列表元素个数限制

if(currentIndex < list.length && currentIndex >= 0) {    [list[startIndex],list[currentIndex]] = [list[currentIndex],list[startIndex]];}

2. 矩形区域限制

超出列表范围。
列表看上去可能是一个不规则区域，但是最后一行空位的可以在第一个限制中计算，所以可以合并成一个矩形区域。
矩形的范围通过ref获得Dom元素

const rangeUI = useRef<HTMLUListElement>(null);<ul ref={ rangeUI }>

获得元素的相关数据，计算获得位置数据

const [mainDirection, setMainDirection] = useState<normalType>({"top": 0, "left": 0, "right": 0 ,"bottom": 0});useEffect(() => {    if(rangeUI.current) {        setMainDirection({"top": rangeUI.current.offsetTop, "left":rangeUI.current.offsetLeft,         "right": rangeUI.current.offsetLeft + rangeUI.current.offsetWidth ,"bottom": rangeUI.current.offsetTop + rangeUI.current.offsetHeight})}},[])

判断是否超出范围

if((flagX === 1 && lengthX > (mainDirection.right - startPage.x))    || (flagX === -1 && -lengthX > (startPage.x - mainDirection.left))    || (flagY === 1 && lengthY > (mainDirection.bottom - startPage.y))    || (flagY === -1 && -lengthY > (startPage.y - mainDirection.top))  )

3. 交换位置

被交换元素

currentIndex = startIndex+(offsetNumberX * flagX)+(offsetNumberY * flagY)*lineNumber;

交换位置，即交换列表中的元素位置

[list[startIndex],list[currentIndex]] =[list[currentIndex],list[startIndex]];

最后把数据都初始化

setDragging(false);setDraggingIndex(-1);setStartPage({"x": 0, "y": 0});setOffsetPage({"x": 0, "y": 0})

结尾

欢迎交流
源码：
https://github.com/SunGuistar...

前言

实现