带有自动溢出功能的 div 内的 jQuery 可排序表超出了 div

Question

我正在使用 jQuery UI sortable 对表格进行排序。问题是当表格位于带有 overflow:auto 和设置宽度的 div 内时，拖动的行出现在该滚动 div 的边界之外。

如何使行或克隆符合溢出？ Here's a jsfiddle

这是 fiddle 中的代码:

HTML:

<div id="theDiv">
  <table>
    <tbody>
      <tr>
        <td>One1</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr>
        <td>One3</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
      <tr>
        <td>One4</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
        <td>One2</td>
        <td>Two</td>
        <td>Three</td>
        <td>Four</td>
        <td>Five</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

div {
  width: 200px;
  overflow: auto;
}

td {
  background-color: cyan;
}

JS:

$(function() {
  $("tbody").sortable();
  $("tbody").disableSelection();
});

Answer 1

您可以使用“包含”选项来执行此操作。

$("tbody").sortable({containment: "#theDiv"});

参见 http://api.jqueryui.com/sortable/#option-containment获取更多信息。