在表

Question

想象一下，我有这个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>

所以我正在尝试的是在这两个表之间拖放和交换。我已经能够使用jquery-ui在表之间拖放，但我无法让它交换。

很抱歉，如果我没有提供足够的信息，我只是一个初学者。谢谢！