实现拖拽复制和可排序的react.js组件
2024-09-05 14:29:21
在实现复制前,对之前的拖拽排序组件属性进行了修改。
- 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计。
- 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性。
拖拽复制的效果如下:
由于实现组件的核心是根据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:
GitHub地址:https://github.com/VicEcho/VD...
最新文章
- HDU 1556 线段树或树状数组,插段求点
- Java操作excel
- TCP三次握手四次挥手详解
- XHTML标签的嵌套规则--很基础很重要
- 项目源码--Android答题类游戏源码
- bzoj2829
- isEqual,isEqualTostring,==三者的区别
- SQL Server 开发利器 SQL Prompt 6.5 T-SQL智能感知分析器 下载地址 完全破解+使用教程
- Xcode4.6 开发 metaio 增强现实 项目(二)--增强现实的实现
- Wireshark对常见视频应用的抓包分析的结果
- 一 、Spring Boot 学习之项目搭建
- spark 1.6 完全分布式平台搭建
- Java中能否利用函数参数来返回值
- select中option的onclick事件失效
- Python003-测试辅助示例应用数据库更新语句创建
- C# web发布设置
- day 44 JavaScript
- 新书预告 ArcGIS跨平台开发系列第一本
- SPIR-V*:面向 OpenCL™ 工作负载的英特尔&#174; 显卡编译器默认接口
- Windows Phone本地数据库(SQLCE):10、创建数据库(翻译) (转)
热门文章
- 用WebDev.WebServer40.EXE调试VS代码
- 调用Visual Studio的cl.exe编译C/C++程序
- 【一周聚焦】 联邦学习 arxiv 2.16-3.10
- cURL error 60: SSL certificate problem: unable to get local issuer certifica 解决
- 一比一还原axios源码(零)—— 概要
- vue中使用js-cookie插件
- LGP2522题解
- 说说如何安装 Openfire
- kafka 第一次小整理(草稿篇)————分发的基本思路[三]
- JDK8的 CHM 为何放弃分段锁