html5 drag and drop background color glitches

Question

I'm setting up a view where table rows can be dragged to another table inside another div. While dragging a row, I highlight the droppable area by changing the background color. However, when dragging an element over elements within the droppable div, the background color glitches in and out.

I've reproduced it in JSFiddle (link) with the following code:

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

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

<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" ondragover="dragOver(event)" ondragleave="dragLeave(event)">
  <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>

Any ideas on how to fix the glitchiness?

Answer 1

So I just found this question. Using one of the answers there, I was able to get what I was trying to do by adding this to my fiddle's CSS:

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

Check out the updated fiddle here.