react.js组件实现拖拽复制和可排序的示例代码


Posted in Javascript onAugust 20, 2018

在实现复制前,对之前的拖拽排序组件属性进行了修改。

  • 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计。
  • 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性。

拖拽复制的效果如下:

react.js组件实现拖拽复制和可排序的示例代码

由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在“拖拽释放”的时候,将被拖拽方的数据放到当前目标所在的value数组中即可。

具体实现代码如下:

// 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时
 drop(dropedSort, data, sortKey, dropedUid, codeKey, ee) {
  ee.preventDefault();
  const code = ee.dataTransfer.getData("code");
  const uId = ee.dataTransfer.getData("uId");
  const dragedItem = ee.dataTransfer.getData("item");
  const sort = ee.dataTransfer.getData("sort");
  if (uId === dropedUid) {
   if (sort < dropedSort) {
    data.map(item => {
     if (item[codeKey] === code) {
      item[sortKey] = dropedSort;
     } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) {
      item[sortKey]--;
     }
     return item;
    });
   } else {
    data.map(item => {
     if (item[codeKey] === code) {
      item[sortKey] = dropedSort;
     } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) {
      item[sortKey]++;
     }
     return item;
    });
   }
  } else if (this.props.isAcceptAdd) {
   let objDragedItem = JSON.parse(dragedItem);
   if (data.filter(item => item[codeKey] === objDragedItem[codeKey]).length === 0) {
    const maxSort = Math.max.apply(Math, data.map(citem => citem[sortKey]));
    data.map(item => {
     if (dropedSort === maxSort) {
      objDragedItem[sortKey] = dropedSort + 1;
     } else {
      if (item.sort > dropedSort) {
       objDragedItem[sortKey] = dropedSort + 1;
       item[sortKey]++
      }
     }
     return item
    });
    data.push(objDragedItem)
   }
  }
  this.props.onChange(data)
  if (ee.target.className.indexOf('droppingContent') !== -1) {
   ee.target.className = styles.droppedcontent;
  }
 }

这里要注意的有两点:

第一点是,我通过this.props.isAcceptAdd这个属性来判断当前组件是否允许接受拖拽复制的元素。

第二点是,我有一个放在内存中的“uId”,这个“uId”在每个拖拽组件初始化的时候生成。这样我就可以通过它来判断,当前被拖拽到目标区域的元素,是组件本身的内部元素还是外部元素,如果是内部就执行排序功能,外部则执行复制的逻辑代码。

组件API:

react.js组件实现拖拽复制和可排序的示例代码

GitHub地址:https://github.com/VicEcho/VDraggable

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

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JS实现拖动示例代码
Nov 01 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 #Javascript
Angular6 写一个简单的Select组件示例
Aug 20 #Javascript
Layer弹出层动态获取数据的方法
Aug 20 #Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
解决LayUI表单获取不到data的问题
Aug 20 #Javascript
You might like
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python实现代码统计工具
2019/09/19 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
出生医学证明书
2014/09/15 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript