JSFiddle - React, Tailwind, and code Playground

HTML

<table id="cells">
    <tr>
        <td id="cell-1-1"></td>
        <td id="cell-2-1"></td>
        <td id="cell-3-1"></td>
    </tr>
    <tr>
        <td id="cell-1-2"></td>
        <td id="cell-2-2"></td>
        <td id="cell-3-2"></td>
    </tr>
    <tr>
        <td id="cell-1-3"></td>
        <td id="cell-2-3"></td>
        <td id="cell-3-3"></td>
    </tr>
</table>

<p id="source" draggable="true">Drag me!</p>

<ul id="log"></ul>

CSS

#cells {
    margin: 10px;
    border: 1px solid #666;
}

#cells td {
    width: 100px;
    height: 100px;
    background: #aaa;
    border: 1px dotted #666;
}

p {
    background: darkred;
    color: white;
    font-weight: bold;
    display: inline-block;
    padding: 10px;
    margin: 10px;
    border-radius: 3px;
}

CoffeeScript

# logger
log = (string) ->
  console.log arguments...
  $('#log').append "<li>#{ string }</li>"

# Source handlers
$('#source')
  .on('dragstart', (e) ->      
      log '#source dragstart', this, e
      e.originalEvent.dataTransfer.setData 'text/html', 'foo'
  )
  .on('dragend',   (e) -> log '#source dragend',   this, e)

# Target Handlers
$('#cells td')
  .on('dragenter', (e) -> log 'target dragenter',  this, e)
  .on('dragleave', (e) -> log 'target dragleave',  this, e)
  .on('dragover',  (e) -> log 'target dragover',   this, e)
  .on('drop',      (e) -> log 'target drop',       this, e)