Jquery ui 在运行时创建排序表？

在运行时创建排序表时，我们如何处理应该连接到排序表的可连接拖动项？例如：

<ul class='sortable'>
</ul>

当用户单击按钮时，我创建上述可排序ul的实例：

function onBtnClick1() {
    var element = $("<ul class='sortable'></ul>");
    element.appendTo("#body");
    $(".sortable").sortable();  // make it sortable?
}

函数onBtnClick1（）{ var元素=$（“

”； 元素。附于（“#体”）； $（“.sortable”）.sortable（）；//是否使其可排序？ } 稍后，用户可以生成要拖放到任何排序表中的项目：

function onBtnClick2() {
    var element = $("<span>Hi there</span>");
    element.draggable();
    element.draggable("option", "connectToSortable", '.sortable');
}

函数onBtnClick2（）{ var元素=$（“Hi there”）； 元素。可拖动（）； element.draggable（“option”，“connecttoportable”，“.sortable”）； } 但它不起作用——我基本上希望将上面的可拖放内容放到任何类类型为“sortable”的ul中。正确的方法是什么

---

谢谢

您应该再设置两个选项以使其工作

element.draggable("option", "helper", 'clone');
element.draggable("option", "revert", 'invalid');

有关和的详细信息，请参阅文档

完整的函数应该如下所示

function onBtnClick2() {
    var element = $("<span>Hi there</span>");
    element.draggable({
        connectToSortable: '.sortable',
        helper: 'clone',
        revert: 'invalid',
        appendTo: '#container'
    });
}

函数onBtnClick2（）{ var元素=$（“Hi there”）； 可拖动的元素({ connectToSortable:“.sortable”， 助手：“克隆”， 还原：“无效”， 附件：“#容器” }); }