在复制之前，拖放排序组件的属性已被修改。

在值上放弃内容属性，拖拽组件暴露的渲染函数，用这个属性渲染组件内部的子组件，主要是指蚂蚁金融的Ant设计中一些组件的设计。为了从模型中分离数据，就像sortKey一样，组件添加了codeKey属性。拖动和复制的效果如下：

由于实现组件的核心是根据值数据渲染页面，要实现拖拽复制功能，只需要在拖拽释放时将被拖拽方的数据放入当前目标所在的值数组中即可。

具体实现代码如下：

//drop(drop sort，data，sortkey，drop uid，codekey，ee) {ee。当元素或选定文本被拖动并释放到有效释放目标位置时，prevent default()；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[sort key]sort item[sort key]droped sort 1){ item[sort key]-；}退货项目；});} else { data . map(item={ if(item[CodeKey]===code){ item[sortKey]=DropEdsort；} else if(item[sort key]Droped sort-1 item[sort key]sort){ item[sort key]；}退货项目；});} } else if(this . props . isacceptad){ let objdureitem=JSON . parse(Drageditem)；if(data . filter(item=item[CodeKey]==ObJedseritem[CodeKey])。length===0){ const maxSort=Math . max . apply(Math，data . map(citem=citem[sortKey])；data . map(item={ if(DropEdsort===Maxsort){ ObJedsureitem[sortKey]=DropEdsort 1；} else { if(item . sort Droped sort){ objdureitem[sortKey]=Droped sort 1；item[sortKey]} } return item })；data . push(ObJedureitem)} } this . props . onchange(data)if(ee . target . class name . indexof(' droping content ')！==-1){ ee . target . class name=style . dropped content；}}这里有两点需要注意：

第一点是我用this . props . isacceptad属性来判断当前组件是否允许接受拖放复制的元素。

第二点是我在内存中有一个“uId”，它是在每个拖放组件初始化时生成的。这样，我就可以用它来判断当前拖到目标区域的元素是组件本身的内部元素还是外部元素。如果是内部，则执行排序功能，同时复制外部逻辑代码。

组件应用编程接口：

GitHub地址：https://github.com/VicEcho/VDraggable

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。