JQuery UI Draggable and Droppable table Cells

by Avinashullal

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 sourceColIndex;
      var allowedClassArr = ['trailer','prime','driver'];
      $('#tblTrailer td span').draggable({
        revert: "invalid",
        zIndex: 100,
        start: function(event, ui) {
          var foo = $(ui.helper).parent(); // should return td
          sourceColIndex = 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 $draggable = $(ui.draggable);
          var draggableClass = $draggable.attr('class'),
          draggableClass = draggableClass.split(' ');
          var $targetTD = $(ev.target); // should return td
          var targetColInd = $targetTD.index();
      //no need to execute other codes if col index doesn't match[ supposed to match the dates]
          if(sourceColIndex != targetColInd) {
            $draggable.draggable('option', 'revert', true);
          	return false;
          }
          var targetSpans =  $targetTD.find('span');
          //Check whether item is present, if present then revert, duplicate found.          
          var flag =false;
          $.each(targetSpans,function(i,v){
             if( $(this).hasClass(draggableClass[0])){
                 flag= true;
             }	  
          });
          if(flag){
             //alert the user if necessary
          	//alert('Duplicate '+draggableClass[0]+' found.');
          	$draggable.draggable('option', 'revert', true);
          	return false;
          }
          
         $(ui.draggable).detach().css({
              top: 'auto',
              left: 'auto',
              background: '#f3f3f3'
            }).appendTo(this);
          
          
          
         
        }
     ...