jQueryUI将单元格内容从表拖放到具有列索引

时间：2015-12-26 13:28:23

标签： javascript jquery html jquery-ui

我有2个表，列数相同，每个表格单元格中有一些跨度。我使用jquery Ui draggable和droppable来将跨度从一个表拖放到另一个表。

＆＃13;
＆＃13; 
$(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);
    }
  });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

<小时/> 编辑：我可能没解释清楚。

Screenshot of the table structure

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

我希望现在我清楚。

1 个答案:

答案 0 :(得分：2)

我显然不明白您的问题，但假设您想根据单元格索引限制丢弃，请尝试此解决方案

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




        }
      });

查找更新的JSFIDDLE here

相关问题
最新问题