How to make draggable element to remaim in the same place

Question

How can make a draggable element to remain displayed on its source box after being dragged?

Below the script to illustrate it:

function dragStart(ev) {
  ev.dataTransfer.setData('text1', ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData('text1');
  ev.target.appendChild(document.getElementById(data));
}

function allowDrop(ev) {
  ev.preventDefault();
}

.boxarticle {
  width: 200px;
  height: 150px;
  border: 1px solid blue;
  margin: 0 0 10px 20
}

div#panier {
  width: 150px;
  height: 150px;
  background-color: ;
  border: 1px solid blue;
}

<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
  <img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image' data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
</div>

<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>

Answer 1

You need to clone it and give it a new id, otherwise it will assume "drag".

HTML5 drag and copy?

function dragStart(ev)
{
  ev.dataTransfer.setData('text1',ev.target.id); 
}

function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("text1");
  var nodeCopy = document.getElementById(data).cloneNode(true);
  nodeCopy.id = "randomId";
  ev.target.appendChild(nodeCopy);
}

function allowDrop(ev)
{
  ev.preventDefault();
}

.boxarticle { 
     width:200px;height: 150px; border:1px solid blue;margin: 0 0             10px 20
 }

div#panier {
     width:150px;height: 150px;background-color: ; border: 1px        solid blue;
}

<!-- I want that image to remain here after I dragged it -->
<div class='boxarticle'>
  <img src="https://cdn-images-1.medium.com/max/1200/1*QQvzwKk7rdC1JkY0XiPVUQ.png" draggable="true" id='image'  data-price='9200' ondragstart="dragStart(event)" width=80 height=80>
 </div>

<!-- where draggable element go in -->
<div id="panier" ondrop='drop(event)' ondragover="allowDrop(event)"> Drag and drop image here..but leave it in the source place </div>