Question

我有以下可排序的结构：

<div id="wrap">
  <ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>

  <ul class="sortable">
    <li>Item 11</li>
    <li>Item 22</li>
    <li>Item 33</li>
    <li>Item 44</li>
  </ul>
</div>

和javascript

  $(function() {
    $( ".sortable" ).sortable({
      connectWith: ".sortable"
    }).disableSelection();

    $("button").click(function() {
      $("<ul class=\"sortable\"> </ul>").appendTo("#wrap");
    });
  });

但是当我在点击事件中添加新列表时，它不会变得可排序，也不接受任何项目。

我还创建了jsbin：https://jsbin.com/xirehenubi/edit?html,js,output

Answer 1

JSBin示例的控制台抱怨$.sortable不是指示JQueryUI未正确初始化的函数。

原因是你包括jquery-1.11.3.js然后是JQueryUI，然后是jquery-2.1.4.js。只需删除最后一个脚本，您的示例即可。

编辑：

创建新列表时，还必须配置此列表，例如：

$("button").click(function() {
    var newList = $("<ul class=\"sortable ui-sortable\"> </ul>");
    newList.sortable({
        connectWith: ".sortable"
    }).disableSelection();
    $("<br>").appendTo("#wrap");
    newList.appendTo("#wrap");
});

jQuery连接sortable通过ajax追加新容器

1 个答案: