JQuery UI Draggable and Droppable table Cells

by ravimallya

HTML

<table id="tblTrailer" class="table table-bordered mrg-0 resource-table">
  <thead>
    <tr>
      <th>Resources</th>
      <th>Sep 1</th>
      <th>Sep 2</th>
      <th>Sep 3</th>
      <th>Sep 4</th>
      <th>Sep 5</th>
      <th>Sep 6</th>
      <th>Sep 7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trailer</td>
      <td>
        <span class="trailer">TRI-001</span>
        <span class="trailer">TRI-101</span>
      </td>
      <td>
        <span class="trailer">TRI-102</span>
        <span class="trailer">TRI-202</span>
      </td>
      <td><span class="trailer">TRI-003</span></td>
      <td>
        <span class="trailer">TRI-004</span>
        <span class="trailer">TRI-104</span>
      </td>
      <td>
        <span class="trailer">TRI-005</span>
        <span class="trailer">TRI-105</span>
      </td>
      <td><span class="trailer">TRI-006</span></td>
      <td>
        <span class="trailer">TRI-007</span>
        <span class="trailer">TRI-107</span>
      </td>
    </tr>
    <tr>
      <td>Prime Movers</td>
      <td><span class="prime">PMS-001</span></td>
      <td>
        <span class="prime">PMS-002</span>
        <span class="prime">PMS-102</span>
        <span class="prime">PMS-202</span>
      </td>
      <td>
        <span class="prime">PMS-003</span>
        <span class="prime">PMS-103</span>
      </td>
      <td><span class="prime">PMS-004</span></td>
      <td>
        <span class="prime">PMS-005</span>
        <span class="prime">PMS-105</span>
      </td>
      <td><span class="prime">PMS-006</span></td>
      <td>
        <span class="prime">PMS-007</span>
        <span class="prime">PMS-107</span>
      </td>
    </tr>
    <tr>
      <td>Drivers</td>
      <td><span class="driver">DRV-001</span></td>
      <td>
        <span class="driver">DRV-002</span>
        <span class="driver">DRV-102</span>
      </td>
      <td>
        <span class="driver">DRV-003</span>
        <span class="driver">DRV-103</span>
      </td>
     ...

CSS

body {
  font-size: 14px;
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table tr td,
table tr th {
  border: 1px solid #999;
  width: 12.5%;
  vertical-align: top;
}

table td span {
  display: block;
  text-align: center;
  transition: all 0.5s linear;
}

JavaScript

$(document).ready(function() {
      var colIndex;
      $('#tblTrailer td span').draggable({
        revert: "invalid",
        zIndex: 100,
        start: function(event, ui) {
          var foo = $(ui.helper).parent(); // should return td
          colIndex = foo.index();
          $(ui.helper).css({
            padding: "2.5px 5px",
            border: "1px solid #ddd",
            background: "#f2f2f2"
          });
          //console.log(ind);
        }
      });
      $('#tblTrailerBooking tr td').droppable({
        accept: "#tblTrailer td span",
        activeClass: "ui-state-highlight",
        drop: function(ev, ui) {
          var foo = $(ev.target); // should return td
          var spanCount = foo.find('span').length;
         
          var myColInd = foo.index();
          if (myColInd === colIndex) {

            alert('hello')
            $(ui.draggable).detach().css({
              top: 'auto',
              left: 'auto',
              background: '#f3f3f3'
            }).appendTo(this);

          } else {
            $(ui.draggable).draggable('option', 'revert', true);
            return false;
          }
        }
      });
    });