JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
Drag item from some stuff 2 to some stuff 1
</h3>

<div id="table1-wrapper" class="table-wrapper" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
  <table>
    <tbody>
      <tr draggable="true">
        <td>some stuff 1</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 1</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 1</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="table2-wrapper" class="table-wrapper">
  <table >
    <tbody>
      <tr draggable="true">
        <td>some stuff 2</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 2</td>
      </tr>
      <tr draggable="true">
        <td>some stuff 2</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.table-wrapper {
  border: 1px solid black;
}

#table1-wrapper * {
  pointer-events: none;
}

JavaScript

function dragOver(ev) {
	document.getElementById('table1-wrapper').style.backgroundColor = 'gray';
}
  
function dragLeave(ev) {
  document.getElementById('table1-wrapper').style.backgroundColor = null;
}