在实现复制之前,修改了之前拖拽排序组件的属性。放弃value中的content属性,拖拽组件暴露的render函数,使用该属性渲染组件内部的子组件。这主要是基于蚂蚁金服Antdesign中的一些组件的设计。为了实现Data和Model的解耦,像sortKey一样,组件增加了codeKey属性。拖拽复制效果如下:由于实现组件的核心是根据值数据渲染页面,所以要实现拖拽复制功能,只需要将在值数组中“拖放”时被拖动方到当前目标。具体实现代码如下://当元素或选中的文本被拖放到有效的放置目标位置时drop(dropedSort,data,sortKey,droppedUid,codeKey,ee){ee.preventDefault();常量代码=ee.dataTransfer.getData("代码");constuId=ee.dataTransfer.getData("uId");constdraggedItem=ee.dataTransfer.getData("项目");constsort=ee.dataTransfer.getData("排序");if(uId===droppedUid){if(sort{if(item[codeKey]===code){item[sortKey]=droppedSort;}elseif(item[sortKey]>sort&&item[sortKey]{if(item[codeKey]===code){item[sortKey]=droppedSort;}elseif(item[sortKey]>dropedSort-1&&item[sortKey]item[codeKey]===objDragedItem[codeKey]).length===0){constmaxSort=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]++}}返回项目});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...