title: Keep element that is being dragged
body: <p>I am making a drag event, but when I do it, I want to keep the element i was trying to drag.</p>
  
  <p>Here is what I tried to do.</p>
  
  <pre><code>function drag(ev) {
  
  ev.dataTransfer.setData("text", ev.target.id);
  var data = ev.dataTransfer.getData("text");
  console.log(document.getElementById(data));
  document.getElementById("tareas").append(document.getElementById(data));
  }
  </code></pre>
  
  <p>In the <code>console.log</code> of <code>document.getElementById(data)</code> I get this</p>
  
  <pre><code>&lt;p id="item1" class="text-danger materias" draggable="true" ondragstart="drag(event)"&gt;Cambio aceite&lt;/p&gt;
  </code></pre>
  
  <p>but it doesnt stay, if anybody can give me an idea on how to keep the element.
  thanks. 
  (Edit) adding images</p>
  
  <p><a href="https://i.stack.imgur.com/QXHBU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QXHBU.png" alt="initial state"></a></p>
  
  <p>I want the item to stay on the same place it was at first.
  <a href="https://i.stack.imgur.com/Xtf5A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xtf5A.png" alt="enter image description here"></a></p>