React.js组件实现拖拽排序组件功能过程解析


Posted in Javascript onApril 27, 2020

因为使用了react.js技术栈,所以封装优先考虑输入和输出。基于数据驱动去渲染页面、控制拖拽元素的顺序。

由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop)。当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单。

实现的效果如下:

React.js组件实现拖拽排序组件功能过程解析

第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接

有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法。例如原生的click事件,在react.js里应使用onClick事件。

我的组件使用的拖放属性如下:

  • draggable 当设置为true时,当前控件可以拖拽
  • onDragStart 控件开始被拖拽时触发的事件,它提供一个dataTransfer.setData()方法,将必要的数据存储在对象中便于在其它方法中调用
  • onDragOver 规定当前控件可以接收拖拽的组件的方法,一般在此方法中阻止冒泡
  • onDragEnter 拖动后鼠标进入另一个可接受区域时触发,通过它可以实现移入效果
  • onDragLeave a拖到b,离开b的时候触发,可以用于监听消除移入效果的时机
  • onDrop 当控件被“释放”到一个有效的释放目标位置时触发,我在这个方法中处理数据,并通过它调用onChange方法,将value值暴露给父组件

其中draggable,onDragStart是被“拖拽”方需要设置的属性,onDragOver,onDragEnter,onDragLeave和onDrop是被“拖入”方需要设置的属性。不过对于我的拖拽排序组件,每一个元素都是拖拽和拖入方

第二步,既然“她"是react.js的组件, 按照习惯,简单的将输入属性定为为value,同时,暴露onChange事件监听value的变化,并将其暴露给父组件,同时,暴露一个属性sortKey告诉组件使用哪个key作为排序字段。
既然涉及到排序,同时允许指定组件每个元素的内部子组件,我将输入数据格式定义为一个数组对象,其中content可以为reactNode:

value: [
    {
     content: 'div1',
     code: '01',
     sort: 0,
    },
    {
     content: 'div2',
     code: '02',
     sort: 1
    },
    {
     content: 'div3',
     code: '03',
     sort: 2
    },
    {
     content: 'div5',
     code: '05',
     sort: 5
    },
    {
     content: 'div4',
     code: '04',
     sort: 4
    }]

根据value我去生成可排序组件的每个node,关键代码如下:

// 生成拖拽组件
 createDraggleComponent(data, sortKey, style, uId) {
  return data.sort(this.compare(sortKey)).map((item) => {
   return (
    <div
     className={styles.content}
     key={item.code}
     draggable={true}
     onDragEnter={this.dragenter.bind(this)}
     onDragLeave={this.dragleave.bind(this)}
     onDragStart={this.domdrugstart.bind(this, item[sortKey], item.code, uId, item)}
     onDrop={this.drop.bind(this, item[sortKey], data, sortKey, uId)}
     onDragOver={this.allowDrop.bind(this)}
     style={{ ...style }}>{item.content}</div>
   )
  })
 }
 render() {
  const { value, sortKey, style } = this.props;
  return (
   <Row>
    <div style={{ display: 'flex', flexDirection: 'row' }}>
     {this.createDraggleComponent(value, sortKey, style)}
    </div>
   </Row>
  )
 }

其中的属性方法具体实现:

// 拖动事件
 domdrugstart(sort, code, ee) {
  ee.dataTransfer.setData("code", code);
  ee.dataTransfer.setData("sort", sort);
 }
 // 拖动后鼠标进入另一个可接受区域
 dragenter(ee) {
  ee.target.style.border = '2px dashed #008dff';
  ee.target.style.boxShadow = '0 0 8px rgba(30, 144, 255, 0.8)';
 }
 // a拖到b,离开b的时候触发
 dragleave(ee) {
  ee.target.style.border = '1px solid grey';
  ee.target.style.boxShadow = '';
 }
 // 对象排序
 compare(key) {
  return (obj1, obj2) => {
   if (obj1[key] < obj2[key]) {
    return -1;
   } else if (obj1[key] > obj2[key]) {
    return 1;
   }
   return 0
  }
 }
 // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
 drop(dropedSort, data, sortKey, ee) {
  ee.preventDefault();
  const code = ee.dataTransfer.getData("code");
  const sort = ee.dataTransfer.getData("sort");
  if (sort < dropedSort) {
   data.map(item => {
    if (item.code === code) {
     item[sortKey] = dropedSort;
    } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
     item[sortKey]--;
    }
    return item;
   });
  } else {
   data.map(item => {
    if (item.code === code) {
     item[sortKey] = dropedSort;
    } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
     item[sortKey]++;
    }
    return item;
   });
  }
  this.props.onChange(data)
 }
 allowDrop(ee) {
  ee.preventDefault();
 }

值得注意的点其实只有一个,我控制顺序的时候,并没有使用.target.before(document.getElementById({id}))去实际操控节点,而是在每次触发onDrop时间的时候,处理数据的sort,并通过onChange事件暴露给父组件,将数据输出,通过改变value值触发虚拟dom重新去渲染,以此控制顺序。

根据公司的要求,在此基础上,我还实现了拖拽复制的功能,这个等下次自己不懒的时候再记录下来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
微信jssdk用法汇总
Jul 16 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
js实现3D照片墙效果
Oct 28 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 #Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 #Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 #Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 #Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 #Javascript
jquery检测上传文件大小示例
Apr 26 #jQuery
element中的$confirm的使用
Apr 26 #Javascript
You might like
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
python类型强制转换long to int的代码
2013/02/10 Python
Python 自动补全(vim)
2014/11/30 Python
python实现桌面托盘气泡提示
2019/07/29 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
工商管理专业学生的自我评价
2013/10/01 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
学术诚信承诺书
2014/05/26 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Golang入门之计时器
2022/05/04 Golang