Drag imgage inside Div

by Krzysztof Niecikowski

HTML

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

JavaScript

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

                }