jQueryUI将单元格内容从表拖放到具有列索引的另一个表td

Question

我有2个表,列数相同,每个表格单元格内有一些跨度.我正在使用jquery Ui draggable和droppable来拖放从一个表到另一个表的跨度.

$(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>

我想将跨度插入第二个表的相应列.第二个表不应允许一个单元格中超过3个跨度,每个第一个表格的每一行.尝试了这里提供的解决方案:https://stackoverflow.com/a/788292/1201322没有运气.

JS小提琴链接:https://jsfiddle.net/ravimallya/Le6jdd8c/.

---

编辑:我可能没有清楚地解释清楚.

在第一个表中,您可以看到3行; 而第二个有预订号码.对于每一天,每个预订号码都需要包含第一张表格中的每一行内容.对于Ex:对于B001,我们可以为sep 1添加一个驱动程序,但是我们不能为sep 2添加所有已满足的驱动程序.对于sep 3,我们必须添加所有三个(卡车,原动机和第一张桌子的第3页的驱动程序.我们不应该从任何其他日子掉落.

我希望现在我很清楚.

Answer 1

我显然不明白你的问题，但是假设你想根据单元格索引限制下降，请尝试这个解决方案

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

在这里找到JSFIDDLE

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);




        }
      });

在这里找到更新的JSFIDDLE