ドラッグアンドドロップグリッド内での画像の複製

サイドバーからグリッドに画像をドラッグするドラッグアンドドロップがあります。それはグリッドに入るときにイメージをクローンします。グリッド内のイメージを別のグリッドスペースにドラッグすると、イメージがコピーされますが、私はそれを望ましくありません。これは私のコードです：ドラッグアンドドロップグリッド内での画像の複製

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{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
#div5, #div6, #div7, #div8{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
#div9, #div10, #div11, #div12{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
#div13, #div14, #div15, #div16{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
.row2 { 
 
\t clear: both; 
 
} 
 

 
.row3 { 
 
\t clear: both; 
 
} 
 

 
.row4 { 
 
\t 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{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
#div5, #div6, #div7, #div8{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
#div9, #div10, #div11, #div12{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
#div13, #div14, #div15, #div16{ 
 
\t float: left; 
 
    width: 55px; 
 
    height: 55px; 
 
    border: 1px solid black; 
 
} 
 

 
.row2 { 
 
\t clear: both; 
 
} 
 

 
.row3 { 
 
\t clear: both; 
 
} 
 

 
.row4 { 
 
\t 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; 
 
    } 
 
}

私はこれをどのように修正することができますか？

出典

2017-01-13 Nathan Chan

ev.targetはアイテムがドロップされているdivを参照するため、contains（ 'dropzone'）は常にtrueを返します。

thisは私のために働いた：

ここ

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

をあなたがベースの、のdataTransferにドラッグしたアイテムのparentNode.tagName（「A」または「DIV」のいずれか）を格納し、ドロップ（）関数にアクセスすることができますアイテムをクローンしたり、単純に移動したりすることができます。

出典

2017-01-13 09:42:56

ありがとうございました！返事が遅れて申し訳ありません。 –

ドラッグアンドドロップグリッド内での画像の複製

答えて

関連する問題