Ok so I have the Drag and Drop HTML5 functionality working, but when i drag an image onto a div container and then try dragging a new image into that same container it won't update to the new image, instead the old one remains. Anyone know how i can make it update? My code is below
<style>
#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text/html", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("text/html");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = "newId";
ev.target.appendChild(nodeCopy);
}
</script>
<body>
<div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<img id="drag1" src="forward.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
<img id="drag2" src="left.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
</body>
Aucun commentaire:
Enregistrer un commentaire