I am trying to drag and drop the image into the div area but i was only able to drag it but it doesn't appear in the div when i have droped it. I wanted to also duplicate the image so that when it is dropped, the original one doesn't disappear.
Javascript code:
var dragItem1 = document.getElementById("drag1");
var dropdiv1 = document.getElementById("div1");
//event will be fired when a user starts dragging the item
dragItem1.ondragstart = function (evt) {
evt.dataTransfer.setData('key1', evt.target.id);
console.log("its dragging..");
}
//event will be fired when an element is selected and dragged over a drop location
dropdiv1.ondragover = function (evt) {
evt.preventDefault();
console.log("it's dragover..");
}
//event will be fired when you drop dragged item on drop location
dropdiv1.ondrop = function (evt) {
evt.preventDefault();
var dropItem1 = evt.dataTransfer.getData('key1');
console.log(evt);
console.log("its dropped..");
console.log(dropItem1);
var myElement1 = document.getElementById(dropItem1);
console.log(myElement1);
var myNewElement = document.createElement('img');
myNewElement.src = myElement1.src;
console.log(myNewElement);
}
<img id="drag1" draggable="true" src="images/equation1_3.png">
<div class="boxFirstCol box1 b1 box" id="div1" ondrop="ondrop(event)" ondragover="allowDrop(event)"> </div>
Use document.getElementById("div1").appendChild(myNewElement);
to add the element to the drop location.
var dragItem1 = document.getElementById("drag1");
var dropdiv1 = document.getElementById("div1");
//event will be fired when a user starts dragging the item
dragItem1.ondragstart = function (evt) {
evt.dataTransfer.setData('key1', evt.target.id);
}
//event will be fired when an element is selected and dragged over a drop location
dropdiv1.ondragover = function (evt) {
evt.preventDefault();
}
//event will be fired when you drop dragged item on drop location
dropdiv1.ondrop = function (evt) {
evt.preventDefault();
var dropItem1 = evt.dataTransfer.getData('key1');
var myElement1 = document.getElementById(dropItem1);
console.log(myElement1);
var myNewElement = document.createElement('img');
var myNewElement
myNewElement.src = myElement1.src;
document.getElementById("div1").appendChild(myNewElement);
}
<img id="drag1" draggable="true" src="http://www.icon2s.com/img64/64x64-animal-icon-hamster.png">
<div style="background-color:red;width:200px;height:200px;" id="div1" ondrop="ondrop(event)" ondragover="allowDrop(event)"> </div>