JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<table>
  <tr>
    <td class='time'>09:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>10:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>11:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>12:00</td>
    <td class='empty'></td>
  </tr>
  <tr>
    <td class='time'>13:00</td>
    <td class="empty"></td>
  </tr>
  <tr>
    <td class='time'>14:00</td>
    <td class='empty'></td>
  </tr>
</table>

<div class='interview'>
  This test
</div>

CSS

table {
  border-collapse: collapse;
  border: 1px solid #333;
}

table td {
  border: 1px solid #c1a1a1 !important;
}

table .time {
  width: 60px;
  font-family: 'Calibri'
}

table .empty {
  width: 180px;
}

.interview {
  border: 1px solid #ddd;
  background-color: #e1a2c1;
  height: 42px;
  width: 180px;
}




table .empty {
  position: relative;
}
table .empty .interview {
  position: absolute;
  top: 0; left: 0;
}

JavaScript

$('.interview').draggable({
  cursor: 'move',
  revert: 'invalid',
  helper: 'clone',
  connectToSortable: '.empty',
})
$('.empty').droppable({
  tolerance: 'pointer',
 // drop: function(event, ui) //{
//    ui.draggable.appendTo(this);
  },
  receive: function(event, ui) 		{
            }
});