title: jQueryUI drag and drop cell contents from table to another table td with column index
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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);
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;table id="tblTrailer" class="table table-bordered mrg-0 resource-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Resources&lt;/th&gt;
        &lt;th&gt;Sep 1&lt;/th&gt;
        &lt;th&gt;Sep 2&lt;/th&gt;
        &lt;th&gt;Sep 3&lt;/th&gt;
        &lt;th&gt;Sep 4&lt;/th&gt;
        &lt;th&gt;Sep 5&lt;/th&gt;
        &lt;th&gt;Sep 6&lt;/th&gt;
        &lt;th&gt;Sep 7&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Trailer&lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-001&lt;/span&gt;
          &lt;span class="trailer"&gt;TRI-101&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-102&lt;/span&gt;
          &lt;span class="trailer"&gt;TRI-202&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="trailer"&gt;TRI-003&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-004&lt;/span&gt;
          &lt;span class="trailer"&gt;TRI-104&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-005&lt;/span&gt;
          &lt;span class="trailer"&gt;TRI-105&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="trailer"&gt;TRI-006&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-007&lt;/span&gt;
          &lt;span class="trailer"&gt;TRI-107&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Prime Movers&lt;/td&gt;
        &lt;td&gt;&lt;span class="prime"&gt;PMS-001&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="prime"&gt;PMS-002&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-102&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-202&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="prime"&gt;PMS-003&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-103&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="prime"&gt;PMS-004&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="prime"&gt;PMS-005&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-105&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="prime"&gt;PMS-006&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="prime"&gt;PMS-007&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-107&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Drivers&lt;/td&gt;
        &lt;td&gt;&lt;span class="driver"&gt;DRV-001&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="driver"&gt;DRV-002&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-102&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="driver"&gt;DRV-003&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-103&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="driver"&gt;DRV-004&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-104&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="driver"&gt;DRV-005&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="driver"&gt;DRV-006&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-106&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="driver"&gt;DRV-007&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-107&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  &lt;table id="tblTrailerBooking" class="table table-bordered mrg-0 resource-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Booking No.&lt;/th&gt;
        &lt;th&gt;Sep 1&lt;/th&gt;
        &lt;th&gt;Sep 2&lt;/th&gt;
        &lt;th&gt;Sep 3&lt;/th&gt;
        &lt;th&gt;Sep 4&lt;/th&gt;
        &lt;th&gt;Sep 5&lt;/th&gt;
        &lt;th&gt;Sep 6&lt;/th&gt;
        &lt;th&gt;Sep 7&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;B0001&lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-201&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-101&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-002&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-302&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-102&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class="prime"&gt;PMS-304&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class="driver"&gt;DRV-006&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="trailer"&gt;TRI-007&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;B0002&lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-201&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-101&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-002&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-302&lt;/span&gt;
          &lt;span class="driver"&gt;DRV-102&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class="prime"&gt;PMS-304&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="driver"&gt;DRV-005&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class="trailer"&gt;TRI-007&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;B0003&lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-201&lt;/span&gt;
          &lt;span&gt;PMS-101&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="trailer"&gt;TRI-002&lt;/span&gt;
          &lt;span class="prime"&gt;PMS-302&lt;/span&gt;
          &lt;span class="trailer"&gt;DRV-102&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="driver"&gt;PMS-303&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;span class="driver"&gt;DRV-006&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;&lt;span class="trailer"&gt;TRI-007&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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: <a href="https://stackoverflow.com/a/788292/1201322">https://stackoverflow.com/a/788292/1201322</a> with no luck.</p>
  
  <p>JS Fiddle link: <a href="https://jsfiddle.net/ravimallya/Le6jdd8c/" rel="nofollow noreferrer">https://jsfiddle.net/ravimallya/Le6jdd8c/</a> .
  <hr />
  Edit: I might not explained it clearly.</p>
  
  <p><a href="https://i.stack.imgur.com/vWqQS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vWqQS.jpg" alt="Screenshot of the table structure"></a></p>
  
  <p>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.</p>
  
  <p>I Hope now I'm clear.</p>