Duplizieren von Bildern in Drag and Drop Grid

Ich habe Drag & Drop, wo Sie Bilder aus der Seitenleiste in ein Raster ziehen. Es klont das Bild, wenn es in das Raster geht. Wenn ich ein Bild im Raster in einen anderen Rasterbereich verschiebe, wird es kopiert und ich möchte es nicht. Dies ist mein Code:Duplizieren von Bildern in Drag and Drop Grid

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

Wie kann ich dieses Problem beheben?

Quelle

2017-01-13 Nathan Chan

Ich fand, dass ev.target auf das div verweist, wo das Element gelöscht wird, also enthält ('dropzone') immer true.

this für mich gearbeitet:

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

Hier können Sie speichern parentNode.tagName (entweder 'a' oder 'div') des gezogene Element in Daten-Transfer und den Zugang in der Drop() Funktion, basierend auf dem du den Gegenstand klonst oder ihn einfach verschiebst.

Quelle

2017-01-13 09:42:56

Vielen Dank! Entschuldige, dass du so lange gebraucht hast, um zu antworten. –

Duplizieren von Bildern in Drag and Drop Grid

Antwort

Verwandte Themen