Question

我使用jQuery UI排序表来排序。问题是当表位于具有overflow：auto和设置宽度的div内时，拖动的行显示在该滚动div的边界之外。

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

以下是小提琴中的代码：

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

您可以使用＆＃39;收容＆＃39;选项可以做到这一点。

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

有关详细信息，请参阅http://api.jqueryui.com/sortable/#option-containment。

具有溢出自动的div内的jQuery可排序表扩展到div之外

1 个答案: