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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python中return self的用法详解
2018/07/27 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
材料化学应届生求职信
2013/10/09 职场文书
董事长岗位职责
2013/11/30 职场文书
退休感言
2014/01/28 职场文书
创业计划书之服装
2019/10/07 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
Vue Element plus使用方法梳理
2022/12/24 Vue.js