title: How to set a free position for canvas in a Dropzone
body: <p>This is my Canvas:</p>
  
  <pre><code>&lt;canvas id="nota1" class="Nota"
     draggable="true" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"
     width="10" height="20"
     style="border:1px solid black;"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>This is my Div (Dropzone):</p>
  
  <pre><code>&lt;div
   id="section" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"
   style="overflow-y:scroll; overflow-x:scroll;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>These are all my functions for Drag and Drop:</p>
  
  <pre><code>function dragstart_handler(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    ev.effectAllowed = "copyMove"; 
  }
  
  function dragover_handler(ev) {
    ev.preventDefault();
  
  }
  
  function drop_handler(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text");
    var nodeCopy = document.getElementById(id).cloneNode(true);
    nodeCopy.id = "notapiazzata";
    ev.target.appendChild(nodeCopy);
  }
  
  function dragend_handler(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
  }
  </code></pre>
  
  <p>My Drag and Drop works properly, but when I drag a canvas in the dropzone it moves in the superior left corner of the div, and then when I place another canvas, it moves close to the previous (like a characters sequence).</p>
  
  <p>I would like to move my canvas everywhere in my dropzone, how can I do that?</p>