Drag, drop and swapping elements between tables

Question

Imagine i have this JsFiddle ç

<table class="connectedtable">
  <tr id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <td id="drag1" draggable="true" ondragstart="drag(event)" />10</td>
  </tr>
  <tr id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <td id="drag2" draggable="true" ondragstart="drag(event)" />20</td>
  </tr>
  <tr id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
    <td id="drag3" draggable="true" ondragstart="drag(event)" />30</td>
  </tr>
</table>
<table class="connectedtable">
  <tr id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
    <td id="drag4" draggable="true" ondragstart="drag(event)" />40</td>
  </tr>
  <tr id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
    <td id="drag5" draggable="true" ondragstart="drag(event)" />50</td>
  </tr>
  <tr id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
    <td id="drag6" draggable="true" ondragstart="drag(event)" />60</td>
  </tr>
</table>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("src", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var src = document.getElementById(ev.dataTransfer.getData("src"));
    var srcParent = src.parentNode;
    var tgt = ev.currentTarget.firstElementChild;

    ev.currentTarget.replaceChild(src, tgt);
    srcParent.appendChild(tgt);
}
</script>

So what i'm trying is to drag, drop and swap between those two tables. I've been able to drag and drop between tables using jquery-ui, but I couldn't manage to make it swap.

Sorry if I'm not giving enough information, I'm just a beginner. Thanks!