使用 jQuery Sortable 将项目拖放到空白区域答案

【问题标题】：Drop item in an empty space using jQuery Sortable使用 jQuery Sortable 将项目拖放到空白区域
【发布时间】：2013-07-16 09:35:43
【问题描述】：

我正在使用jQuery Sortable，它运行良好。但是我在这里遇到了一个小问题。
我有两个块，其中一个块的元素可以移动到另一个块。但问题是，当右侧块的所有元素都移动到左侧块时，现在我无法从左侧块中移动任何元素到右侧块，因为右侧块没有任何空白空间，我猜。
元素完全移动之前的块

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

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

这是我的代码和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>

【问题讨论】：

这很奇怪：` $(this).width($(this).width());` 但肯定与您的问题无关。基本上，你应该为这类问题设置一个 jsfiddle。
@roasted 我发现谷歌中的帮助代码解决了拖动时的 td 宽度问题。它不会损害其他功能。
@roasted 用 jsfiddle 编辑。

标签： javascript jquery html jquery-ui-sortable

【解决方案1】：

这是一个丑陋的 hack，让你的 tbody 成为块级元素并给它一个最小高度。

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

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

【讨论】：

是的，它是一种可行的东西，但 tbody 宽度设置为它的内容大小，而不管我希望设置的大小...
我修复了您的宽度问题，但它在排序过程中导致问题。这是小提琴jsfiddle.net/wY4ja/3。我最好的选择是避免使用表格。