jQuery 可对动态元素进行排序

Question

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

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

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

}

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

我尝试使用“destroy”来破坏可排序，然后重新初始化，但这不起作用。我还尝试使用“refresh”和“refreshPosition”

fiddle : http://jsfiddle.net/rz2mh8ec/6/ (按“添加”重现问题)

谢谢

Answer 1

在具有自己的 id 属性的元素上使用 .clone() ，您会复制此 id 这不是一个好的做法.
下一步是应将 sortable 应用于父元素。

<小时/>

编辑

问题似乎出在 clone(true) 上。
当事件处理程序未与元素一起复制时，它不起作用 (.clone(false))

在尝试克隆(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