Question

我正在使用jQuery Sortable并且效果很好。但我在这里得到一个小问题我有两个块，其中一个块的元素可以移动到另一个块。但问题是，当右侧块的所有元素都移动到左侧块时，现在我无法从左侧块移动任何元素因为右边的区块没有任何空的空间，我猜 在元素完全移动之前阻止 enter image description here

右侧块元素向左移动后的块 enter image description here 现在，我无法将元素从左侧块移动到右侧块。

那么有没有办法在空块（第二张图片中的右侧块）或任何其他替代解决方案中保留空白区域？

以下是我的代码和jsfiddle here。

<!DOCTYPE HTML PUBLIC>
<html>
 <head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <style>
  body{
   margin:10px;
  }
  table{
   width:100%;
  }
  .gridWrapper{
   border-collapse:collapse;
  }
  .gridWrapper,.gridWrapper tr  td.column{
    border:2px solid red;
    vertical-align:top;
  }
   .grid{
     border-collapse:collapse;
    *border-spacing:10px;
   }
   .grid td{
     border:1px dashed black;
     white-space:nowrap;
     padding:3px 5px;
   }
   .ui-state-highlight{
     height: 1.5em;
     line-height: 1.2em;
   }
  .grid td:first-child{
      text-align: right;
      font-weight: bold;
  }
  td.column{
     width:50%;
   }
  </style>
 </head>

 <body>
 <table class="gridWrapper">
  <tr>
   <td class="column">
  <table id="sort1" class="grid" title="Kurt Vonnegut novels">
    <tbody>
        <tr><td>Name</td><td>Will Smith</td></tr>
        <tr><td>Date of Birth</td><td>25/09/1968</td></tr>
        <tr><td>Zodiac Sign</td><td>Libra</td></tr>
    </tbody>
 </table>
<td class="column">
  <table id="sort2" class="grid" title="Kurt Vonnegut novels">
    <tbody>
        <tr><td>Occupation</td><td>Actor,Producer</td></tr>
        <tr><td>Place of birth</td><td>Philadelphia</td></tr>
    </tbody>
 </table>
</td>
</tr>
</table>
 <script>
  $(".grid tbody").sortable({
       connectWith:'.grid tbody',
       placeholder: "ui-state-highlight",
       dropOnEmpty: true,
       helper: function(e, ui) {
                    ui.children().each(function() {
                        $(this).width($(this).width());
                    });
                    return ui;
                },
        forceHelperSize: true
  }).disableSelection();
 </script>
</body>

</html>

Answer 1

它是一个丑陋的黑客，使你的tbody成为一个块级元素并给它一个最小高度。

.grid tbody{
    min-height: 100px;
    display: block;
}

这是fiddle。我建议不要使用表进行排序，因为操纵表很难。利用div和li来显示数据。

使用jQuery Sortable在空白区域中删除项目

1 个答案: