JQuery UI Draggable and Droppable table Cells

HTML

<table id="tblTrailer" class="table table-bordered mrg-0 resource-table">
      <thead>
        <tr>
          <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><span>MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>

        </tr>
        <tr>
          <td><span>MEL 20445545-2</span></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
        </tr>
        <tr>
          <td><span>MEL 20445545-2</span></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <br/>
    Table2
    <table id="tblTrailerBooking" class="table table-bordered mrg-0 resource-table">
      <tbody>
        <tr>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
        </tr>
        <tr>
          <td><span>MEL 20445545-2</span></td>
          <td id="test"><span >MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td></td>
          <td><span>MEL 20445545-2</span></td>
        </tr>
        <tr>

          <td> </td>
          <td><span>MEL 20445545-2</span></td>
          <td></td>
          <td><span>MEL...

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: 14.28571428571429%;
}

table td span {
  display: block;
  text-align: center;
  transition: all 0.5s linear;
}
span{border:1px solid red;}

JavaScript

$(document).ready(function() {
    var colIndex,rowIndex;
    $('#tblTrailer td span').draggable({
      revert: "invalid",
      zIndex: 100,
      start: function(event, ui) {
        var foo = $(ui.helper).parent(); // should return td
        colIndex = foo.index();
        rowIndex = foo.parent().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();
        var myRowInd = foo.parent().index();
        if(myColInd!= colIndex || rowIndex != myRowInd || spanCount > 3) {
         $(ui.draggable).draggable('option','revert',true);
         return false;
        };
        $(ui.draggable).detach().css({
          top: 'auto',
          left: 'auto',
          background: '#f3f3f3'
        }).appendTo(this);
      }
    });
  });