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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
javascript 实现map集合
Apr 03 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
理解javascript中的闭包
Jan 11 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
js仿京东放大镜效果
Aug 09 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
一个捕获函数输出的函数
2007/02/14 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
js几个验证函数代码
2010/03/25 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
一份比较全的PHP面试题
2016/07/29 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
美德好少年事迹材料
2014/01/19 职场文书
出纳员岗位责任制
2014/02/11 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
甜品店创业计划书
2014/08/14 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS