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 对话框和状态栏使用说明
Oct 25 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 Javascript
浅谈克隆 JavaScript
Nov 02 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP 中文处理技巧
2010/04/25 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
django 实现电子支付功能的示例代码
2018/07/25 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
几个Shell Script面试题
2012/08/31 面试题
函授自我鉴定
2013/11/06 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
小学生检讨书大全
2014/02/06 职场文书
运动会跳远加油稿
2014/02/20 职场文书
作风整顿剖析材料
2014/09/30 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
授权收款委托书范本
2014/10/10 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2014年教研工作总结
2014/12/06 职场文书
大学军训决心书
2015/02/05 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis