Déposer dans un div pour javascript

Question

J'essaye de faire glisser et déposer l'image dans la zone div mais je n'ai pu que la faire glisser mais elle n'apparaît pas dans la div quand je l'ai déposée. Je voulais aussi dupliquer l'image de sorte que quand elle est tombée, l'originale ne disparaisse pas.

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

Code HTML:

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

Answer 1

Utilisez document.getElementById("div1").appendChild(myNewElement); pour ajouter l'élément à l'emplacement de chute.

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>

Answer 2

Vous pouvez utiliser .appendChild() pour ajouter l'élément <img> créé dynamiquement à l'intérieur event.target gestionnaire d'événements drop.

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); 
    evt.target.appendChild(myNewElement); // append `<img>` to `<div>` 
} 

http://plnkr.co/edit/OndnpzsIJjTjhbiNbhUc?p=preview