How to set a free position for canvas in a Dropzone

Question

This is my Canvas:

<canvas id="nota1" class="Nota"
   draggable="true" ondragstart="dragstart_handler(event);" ondragend="dragend_handler(event);"
   width="10" height="20"
   style="border:1px solid black;">
</canvas>

This is my Div (Dropzone):

<div
 id="section" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"
 style="overflow-y:scroll; overflow-x:scroll;">
</div>

These are all my functions for Drag and Drop:

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

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

I would like to move my canvas everywhere in my dropzone, how can I do that?