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 面向对象编程(2) 定义类
May 18 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
JS的深浅复制详细
Oct 16 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多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
js验证表单大全
2006/11/25 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python中使用动态变量名的方法
2014/05/06 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
在django中自定义字段Field详解
2019/12/03 Python
python根据完整路径获得盘名/路径名/文件名/文件扩展名的方法
2020/04/22 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
治超工作实施方案
2014/05/04 职场文书
五水共治一句话承诺
2014/05/30 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
欢迎词范文
2015/01/27 职场文书
离婚被告代理词
2015/05/23 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
美容院管理规章制度
2015/08/05 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
Java 异步任务计算FutureTask
2022/04/28 Java/Android