jQuery 可按动态元素排序

Question

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

我按以下方式设置排序：

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

}

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

我尝试使用 "destroy" 破坏 sortable，然后重新初始化，但这不起作用。我也尝试使用 "refresh" 和 "refreshPosition"

Fiddle: http://jsfiddle.net/rz2mh8ec/6/（按 "Add" 重现问题）

谢谢

Answer 1

在具有自己的 id 属性的元素上使用 .clone()，您正在复制此 id 不好的做法。
接下来是 sortable 应该应用于父元素。

---

编辑

似乎问题出在 clone(true)。
当事件处理程序未与元素一起复制时它确实有效 (.clone(false))

在尝试 clone(true):

之前，您必须 destroy 可排序

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