jQuery通过ajax连接可排序追加新容器

我有以下可排序结构：

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

项目1
项目2
项目3
项目4


项目11
项目22
项目33
项目44

和javascript

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

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

$（函数（）{
$（“.sortable”）.sortable({
连接到：“.sortable”
}).disableSelection（）；
$（“按钮”）。单击（函数（）{
$（“
”）。附录（“#wrap”）；
});
});

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

---

我还创建了jsbin:

您的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");
});

$（“按钮”）。单击（函数（）{
var newList=$（“
”
”；
newList.sortable({
连接到：“.sortable”
}).disableSelection（）；
$（“
”）。附加到（“#wrap”）；
新列表。附加到（“包装”）；
});

我已经更新了jsbin，但这仍然不能解决无法将项目拖动到新列表容器的问题