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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python框架django项目部署相关知识详解
2019/11/04 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
会计电算化个人自我评价
2013/11/17 职场文书
世博会口号
2014/06/20 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
干部个人考察材料
2014/12/24 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书