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

前言

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

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

实现

必要的数据预定义

/*
* 必要参数,可考虑从外部接收
* 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...

25 声望
1 粉丝
0 条评论
推荐阅读
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木172阅读 13.9k评论 10

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.7k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

25 声望
1 粉丝
宣传栏