在拖放网格中复制图像

Question

I have a drag and drop where you drag images from the sidebar into a grid. 我有一个拖放操作，您可以在其中将图像从侧边栏拖到网格中。 It clones the image when it goes into the grid. 当它进入网格时，它将克隆图像。 Although, when I drag an image in the grid to another grid space, it copies it, and I don't want it to. 虽然，当我将网格中的图像拖到另一个网格空间时，它会将其复制，并且我不希望这样做。 This is my code: 这是我的代码：

 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var el = ev.target; if (!el.classList.contains('dropzone')) { el = ev.target.parentNode; ev.target.remove(); } el.appendChild(document.getElementById(data).cloneNode(true)); } function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementsByTagName("body")[0].style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementsByTagName("body")[0].style.marginLeft= "0"; }

 #div1, #div2, #div3, #div4{ float: left; width: 55px; height: 55px; border: 1px solid black; } #div5, #div6, #div7, #div8{ float: left; width: 55px; height: 55px; border: 1px solid black; } #div9, #div10, #div11, #div12{ float: left; width: 55px; height: 55px; border: 1px solid black; } #div13, #div14, #div15, #div16{ float: left; width: 55px; height: 55px; border: 1px solid black; } .row2 { clear: both; } .row3 { clear: both; } .row4 { clear: both; } body { transition: margin .5s; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } .row { width:100%; display:inline-block; margin-bottom:10px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } }

 <!DOCTYPE html> <html> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var el = ev.target; if (!el.classList.contains('dropzone')) { el = ev.target.parentNode; ev.target.remove(); } el.appendChild(document.getElementById(data).cloneNode(true)); } function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementsByTagName("body")[0].style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementsByTagName("body")[0].style.marginLeft= "0"; } </script> <body> <div id="main"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Materials</span> </div> <div id="div1" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div2" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div3" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div4" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div class="row2"> <div id="div5" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div6" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div7" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div8" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div> <div class="row3"> <div id="div9" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div10" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div11" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div12" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div> <div class="row4"> <div id="div13" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div14" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div15" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <div id="div16" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </div> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#"> <img src="bricks.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"> Bricks </a> <a href="#"> <img src="halfbrick.png" draggable="true" ondragstart="drag(event)" id="drag1.3" width="55" height="55"> Half Brick </a> <a href="#"> <img src="halfbrick2.png" draggable="true" ondragstart="drag(event)" id="drag1.6" width="55" height="55"> Half Brick </a> <a href="#"> <img src="#" draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55"> Stone </a> <a href="#"> <img src="#" draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55"> Wood </a> <a href="#"> <img src="#" draggable="true" ondragstart="drag(event)" id="drag4" width="55" height="55"> Eraser </a> </div> </body> <style> #div1, #div2, #div3, #div4{ float: left; width: 55px; height: 55px; border: 1px solid black; } #div5, #div6, #div7, #div8{ float: left; width: 55px; height: 55px; border: 1px solid black; } #div9, #div10, #div11, #div12{ float: left; width: 55px; height: 55px; border: 1px solid black; } #div13, #div14, #div15, #div16{ float: left; width: 55px; height: 55px; border: 1px solid black; } .row2 { clear: both; } .row3 { clear: both; } .row4 { clear: both; } body { transition: margin .5s; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } .row { width:100%; display:inline-block; margin-bottom:10px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } }

How can I fix this? 我怎样才能解决这个问题？

Answer 1

I found that ev.target refers to the div where item is being dropped, so contains('dropzone') always returns true. 我发现ev.target指向要删除项目的div，因此contains（'dropzone'）始终返回true。

this worked for me: 这为我工作：

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));
    }
}

Here you can store parentNode.tagName(either 'a' or 'div') of the dragged item into dataTransfer and access it in the drop() function, based on which you clone the item or simple move it. 在这里，您可以将拖动项的parentNode.tagName（“ a”或“ div”）存储到dataTransfer中，并在drop（）函数中对其进行访问，基于该克隆或简单移动该项。

在拖放网格中复制图像

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-01-13 09:42:56

在拖放网格中复制图像

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-01-13 09:42:56

解决方案1
1 已采纳 2017-01-13 09:42:56