jQueryUI drag and drop cell contents from table to another table td with column index

Question

I have 2 tables with same number of columns with some spans inside each table cell. I'm using jquery Ui draggable and droppable to drag and drop spans from one table to another.

$(document).ready(function() {
  var ind;
  $('#tblTrailer td span').draggable({
    revert: "invalid",
    zIndex: 100,
    start: function(event, ui) {
      var foo = $(ui.helper).parent(); // should return td
      ind = 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) {
      $(ui.draggable).detach().css({
        top: 'auto',
        left: 'auto',
        background: '#f3f3f3'
      }).appendTo(this);
    }
  });
});

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%;
}
table td span {
  display: block;
  text-align: center;
  transition: all 0.5s linear;
}

<link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<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>
      <td>
        <span class="driver">DRV-004</span>
        <span class="driver">DRV-104</span>
      </td>
      <td><span class="driver">DRV-005</span>
      </td>
      <td>
        <span class="driver">DRV-006</span>
        <span class="driver">DRV-106</span>
      </td>
      <td>
        <span class="driver">DRV-007</span>
        <span class="driver">DRV-107</span>
      </td>
    </tr>
  </tbody>
</table>
<br />
<table id="tblTrailerBooking" class="table table-bordered mrg-0 resource-table">
  <thead>
    <tr>
      <th>Booking No.</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>B0001</td>
      <td>
        <span class="trailer">TRI-201</span>
        <span class="prime">PMS-101</span>
      </td>
      <td>
        <span class="trailer">TRI-002</span>
        <span class="prime">PMS-302</span>
        <span class="driver">DRV-102</span>
      </td>
      <td></td>
      <td><span class="prime">PMS-304</span>
      </td>
      <td></td>
      <td><span class="driver">DRV-006</span>
      </td>
      <td><span class="trailer">TRI-007</span>
      </td>
    </tr>
    <tr>
      <td>B0002</td>
      <td>
        <span class="trailer">TRI-201</span>
        <span class="prime">PMS-101</span>
      </td>
      <td>
        <span class="trailer">TRI-002</span>
        <span class="prime">PMS-302</span>
        <span class="driver">DRV-102</span>
      </td>
      <td></td>
      <td><span class="prime">PMS-304</span>
      </td>
      <td><span class="driver">DRV-005</span>
      </td>
      <td></td>
      <td><span class="trailer">TRI-007</span>
      </td>
    </tr>
    <tr>
      <td>B0003</td>
      <td>
        <span class="trailer">TRI-201</span>
        <span>PMS-101</span>
      </td>
      <td>
        <span class="trailer">TRI-002</span>
        <span class="prime">PMS-302</span>
        <span class="trailer">DRV-102</span>
      </td>
      <td><span class="driver">PMS-303</span>
      </td>
      <td></td>
      <td></td>
      <td><span class="driver">DRV-006</span>
      </td>
      <td><span class="trailer">TRI-007</span>
      </td>
    </tr>
  </tbody>
</table>

I would like to insert the spans to the respective columns of second table. And second table should not allow more than 3 spans in a cell one each from each rows of first table. Tried the solution provided here: https://stackoverflow.com/a/788292/1201322 with no luck.

JS Fiddle link: https://jsfiddle.net/ravimallya/Le6jdd8c/ .

Edit: I might not explained it clearly.

In first table, you can see 3 rows; whereas second one has booking numbers. For each day each booking number should need to have each row content from first table. For Ex: for B001, we can add a driver for sep 1, but we can't for sep 2 as sep 2 all fulfilled. For sep 3, we have to add all three (a truck, a prime mover, and a driver from sep 3 of first table. We should not drop from any other day.

I Hope now I'm clear.

If only respective cells can be dragged and dropped how can one drop 3 spans in one cell? Please clarify the same... — Nouphal.M, Dec 26 '15 at 13:35
yes for eg: u ar dragging span inside 2nd row first column it could only go to the 2nd row first column of second table, right? — Nouphal.M, Dec 26 '15 at 13:51
@Nouphal.M I'm sorry. I might not explained the question clearly. Please see my edit. the first table has full of data. We have to assign a truck, a prime mover and a driver for a date to a specific date for specific Booking no. — Ravimallya, Dec 26 '15 at 14:23
still i don't understand it. It would be better if you could edit your whole question and explain what you are trying to achieve. As the reader is completely unaware of your system. — Nouphal.M, Dec 26 '15 at 14:29
@Nouphal.M sorry to bother you. Please see my updated edit. Hope now things are clear. — Ravimallya, Dec 26 '15 at 14:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99020/discussion-between-ravimallya-and-nouphal-m). — Ravimallya, Dec 26 '15 at 15:06
Have updated my answer check it.. Hope this is what you meant. — Nouphal.M, Dec 27 '15 at 09:32

Nouphal.M · Accepted Answer · 2015-12-27T09:30:03.610

I clearly don't understand your question, but from assuming that you want to restrict the drop based on the cell index, try this solution

 $('#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);
      }
    });

Find JSFIDDLE here

UPDATED ANSWER FOR UPDATED QUESTION 


$('#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);




        }
      });

Find Updated JSFIDDLE here

jQueryUI drag and drop cell contents from table to another table td with column index

1 Answers1

Linked