0

我正在使用jQuery Sortable，效果很好。但是我在这里遇到了一个小问题。
   我有两个块，其中一个块的元素可以移动到另一个块。但问题是，当右侧块的所有元素都移动到左侧块时，现在我无法从左侧块中移动任何元素到右侧块，因为右侧块没有任何空白空间，我猜。
元素完全移动之前的块 在此处输入图像描述

右侧块元素移动到左侧之后的块 在此处输入图像描述 现在，我无法将元素从左侧块移动到右侧块。

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

这是我的代码和jsfiddle。

<!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>
4

1 回答 1

2

它是一个丑陋的 hack，使您的 tbody 成为块级元素并赋予其最小高度。

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

这是小提琴。我建议不要使用表格进行排序，因为操作表格很困难。利用 div 和 li 来显示该数据。

于 2013-07-17T11:45:26.377 回答