jQuery可以对动态元素进行排序

Question

在向DOM中动态添加新的可排序元素时遇到问题。

我按以下方式设置可排序：

$(".lesson_field, #custom_words").sortable({
    connectWith: ".lesson_field, #custom_words",
});

}

但是，当我添加一个新的lesson_field类时，它的行为不像一个可排序的元素。

我尝试通过使用“破坏”来破坏可排序，并重新初始化，但这不起作用。我也尝试过使用“refresh”和“refreshPosition”

小提琴： http://jsfiddle.net/rz2mh8ec/6/（按“添加”重现问题）

由于

Answer 1

对具有自己的.clone()属性的元素使用id，您正在复制此id这不是一个好习惯。
接下来就是sortable应该应用于父元素。

---

修改

似乎问题出在clone(true)上 当事件处理程序未与元素（.clone(false)）

一起复制时，它才能正常工作

在尝试destroy之前，您必须clone(true)排序：

var lessons = 2

function sort() {
    $(".lesson_field, #custom_words").sortable({
        connectWith: ".lesson_field, #custom_words",
    });
}

window.addanother = function () {
    // destroy sortable:
    $(".lesson_field, #custom_words").sortable("destroy");
    // then clone the element:
    var e = $("#lesson_1").first().clone(true)
    e.attr("id", "lesson_" + lessons)
    lessons++;
    e.insertAfter($("#lesson_1").last())
    sort();
}

sort();

JSFiddle JSFiddle