Drag and drop карточек в js

var tds = document.getElementsByTagName('td'); 
 
for (var i = 0; i < tds.length; i++) { 
  tds[i].setAttribute('ondrop', 'drop(event)'); 
  tds[i].setAttribute('ondragover', 'allowDrop(event)'); 
  tds[i].setAttribute('ondragstart', 'drag(event)'); 
  tds[i].setAttribute('draggable', 'true'); 
} 
 
var a; 
 
function sleep(delay) { 
  var start = new Date().getTime(); 
  while (new Date().getTime() < start + delay); 
} 
 
 
function drop(ev) { 
 
  var id = ev.dataTransfer.getData("text"); 
  var from = document.getElementById(id); 
 
  console.log(from); 
  console.log(id); 
  console.log(ev.target); 
 
  if (ev.target instanceof SVGSVGElement && ev.target.children.length == 0) { 
    ev.target.appendChild(from.firstChild); 
 
    setTimeout(500, () => from.firstChild.removeChild(from.firstChild.firstChild)); 
 
  } 
} 
 
function drag(ev) { 
  console.log(ev.target.id); 
  ev.dataTransfer.setData("text", ev.target.id); 
} 
 
function allowDrop(ev) { 
  ev.preventDefault(); 
}

td, 
svg { 
  width: 150px; 
  height: 150px; 
  background: gray; 
  border-radius: 5px; 
} 
 
table { 
  border-style: solid; 
  border-color: black; 
  border-width: 10px; 
  border-radius: 20px; 
  border-spacing: 5px; 
  background: black; 
} 
 
svg { 
  width: 100%; 
  height: 100%; 
}

<table> 
  <tr> 
    <td id="00"> 
      <svg></svg> 
    </td> 
    <td id="10"> 
      <svg></svg> 
    </td> 
    <td id="20"> 
      <svg></svg> 
    </td> 
    <td id="30"> 
      <svg></svg> 
    </td> 
    <td id="40"> 
      <svg> 
                    <image href="goblin.svg"/> 
                </svg> 
    </td> 
    <td id="50"> 
      <svg> 
                    <image href="orc.svg"/> 
                </svg> 
    </td> 
  </tr> 
  <tr> 
    <td id="01"> 
      <svg></svg> 
    </td> 
    <td id="11"> 
      <svg></svg> 
    </td> 
    <td id="21"> 
      <svg></svg> 
    </td> 
    <td id="31"> 
      <svg></svg> 
    </td> 
    <td id="41"> 
      <svg></svg> 
    </td> 
    <td id="51"> 
      <svg></svg> 
    </td> 
  </tr> 
  <tr> 
    <td id="02"> 
      <svg></svg> 
    </td> 
    <td id="12"> 
      <svg></svg> 
    </td> 
    <td id="22"> 
      <svg></svg> 
    </td> 
    <td id="32"> 
      <svg></svg> 
    </td> 
    <td id="42"> 
      <svg></svg> 
    </td> 
    <td id="52"> 
      <svg></svg> 
    </td> 
  </tr> 
  <tr> 
    <td id="03"> 
      <svg></svg> 
    </td> 
    <td id="13"> 
      <svg></svg> 
    </td> 
    <td id="23"> 
      <svg></svg> 
    </td> 
    <td id="33"> 
      <svg></svg> 
    </td> 
    <td id="43"> 
      <svg></svg> 
    </td> 
    <td id="53"> 
      <svg></svg> 
    </td> 
  </tr> 
  <tr> 
    <td id="04"> 
      <svg></svg> 
    </td> 
    <td id="14"> 
      <svg></svg> 
    </td> 
    <td id="24"> 
      <svg></svg> 
    </td> 
    <td id="34"> 
      <svg></svg> 
    </td> 
    <td id="44"> 
      <svg></svg> 
    </td> 
    <td id="54"> 
      <svg></svg> 
    </td> 
  </tr> 
  <tr> 
    <td id="05"> 
      <svg></svg> 
    </td> 
    <td id="15"> 
      <svg></svg> 
    </td> 
    <td id="25"> 
      <svg></svg> 
    </td> 
    <td id="35"> 
      <svg></svg> 
    </td> 
    <td id="45"> 
      <svg></svg> 
    </td> 
    <td id="55"> 
      <svg></svg> 
    </td> 
  </tr> 
</table>