Javascript 在拖放网格中复制图像

我有一个拖放功能，您可以将图像从侧边栏拖到网格中。当图像进入网格时，它会克隆图像。不过，当我将网格中的图像拖动到另一个网格空间时，它会复制它，我不希望它这样做。这是我的代码：

函数allowDropev{ 防止违约； } 函数dragev{ ev.dataTransfer.setDatatext，ev.target.id； } 函数dropev{ 防止违约； var data=ev.dataTransfer.getDatatext； var el=电动汽车目标； if！el.classList.包含“dropzone”{ el=ev.target.parentNode； ev.target.remove； } el.appendChilddocument.getElementByIddata.cloneNodetrue； } 函数openNav{ document.getElementByIdmySidenav.style.width=250px； document.getElementsByTagNamebody[0].style.marginLeft=250px； } 关闭导航功能{ document.getElementByIdmySidenav.style.width=0； document.getElementsByTagNamebody[0]。style.marginLeft=0； } 第一组，第二组，第三组，第四组{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } 第五、第六、第七、第八组{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } 第九、第十、第十一、第十二组{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } 第13、14、15、16区{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } .row2{ 明确：两者皆有； } .row3{ 明确：两者皆有； } .row4{ 明确：两者皆有； } 身体{ 过渡期：5秒； } .侧导航{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：111； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧导航a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：818181； 显示：块； 过渡：0.3s } .sidenav a:悬停，.offcanvas a:聚焦{ 颜色：F1F1； } .sidenav.closebtn{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } 主要{ 过渡：左边距。5s； 填充：16px； } .行{ 宽度：100%； 显示：内联块； 边缘底部：10px； } @媒体屏幕和最大高度：450px{ .侧导航{ 填充顶部：15px； } .侧导航a{ 字号：18px； } } 函数allowDropev{ 防止违约； } 函数dragev{ ev.dataTransfer.setDatatext，ev.target.id； } 函数dropev{ 防止违约； var data=ev.dataTransfer.getDatatext； var el=电动汽车目标； if！el.classList.包含“dropzone”{ el=ev.target.parentNode； ev.target.remove； } el.appendChilddocument.getElementByIddata.cloneNodetrue； } 函数openNav{ document.getElementByIdmySidenav.style.width=250px； document.getElementsByTagNamebody[0].style.marginLeft=250px； } 关闭导航功能{ document.getElementByIdmySidenav.style.width=0； document.getElementsByTagNamebody[0]。style.marginLeft=0； } &9776; 材料 第一组，第二组，第三组，第四组{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } 第五、第六、第七、第八组{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } 第九、第十、第十一、第十二组{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } 第13、14、15、16区{ 浮动：左； 宽度：55px； 高度：55px； 边框：1px纯黑； } .row2{ 明确：两者皆有； } .row3{ 明确：两者皆有； } .row4{ 明确：两者皆有； } 身体{ 过渡期：5秒； } .侧导航{ 身高：100%； 宽度：0； 位置：固定； z指数：1； 排名：0； 左：0； 背景色：111； 溢出x：隐藏； 过渡：0.5s； 填充顶部：60px； } .侧导航a{ 填充：8px 8px 8px 32px； 文字装饰：无； 字体大小：25px； 颜色：818181； 显示：块； 过渡：0.3s } .sidenav a:悬停，.offcanvas a:聚焦{ 颜色：F1F1； } .sidenav.closebtn{ 位置：绝对位置； 排名：0； 右：25px； 字体大小：36px； 左边距：50像素； } 主要{ 过渡：左边距。5s； 填充：16px； } .行{ 宽度：100%； 显示：内联块； 边缘底部：10px； } @媒体屏幕和最大高度：450px{ .侧导航{ 填充顶部：15px； } .侧导航a{ 字号：18px； }

---

} 我发现ev.target指的是正在删除项的div，所以contains'dropzone'总是返回true

为我工作：

function drag(ev, source) {
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.setData("parent", source.parentNode.tagName);

}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var parent= ev.dataTransfer.getData("parent");
    // console.log(parent);
    if(parent == "A"){
      el.appendChild(document.getElementById(data).cloneNode(true));
    }
    else{
      ev.target.appendChild(document.getElementById(data));
    }
}

---

在这里，您可以将拖动项的parentNode.tagname“a”或“div”存储到dataTransfer中，并在drop函数中访问它，在此基础上您可以克隆该项或简单地移动它。

非常感谢！很抱歉花了这么长时间才回复。