javascript - 附加元素上的jquery sortable ui函数

Question

我在一个列表组上使用 jquery 的可排序 ui，它工作得很好。我还有一个将元素添加到列表组的功能:

    $('#addTask').click(function(){
        var name = $("#taskName").val();
        var num = $('li[id=taskOrder]').length+1;
        $("#taskpriority").append('<li id="taskOrder" class="list-group-item list-group-item-dark d-flex justify-content-between align-items-center" draggable="true" style="display: block;">'+name+'<span class="badge badge-dark badge-pill">'+num+'</span></li>');

    });

但是一旦添加了新的列表组，它就不可拖动了。除添加的元素外，所有其他元素。

这是情况的 jsfiddle http://jsfiddle.net/yn8wxu9q/

Answer 1

您可以将 .sortable() 添加到 append() 函数的末尾(或紧跟其后)。像这样:

$('#addTask').click(function(){
    var name = $("#taskName").val();
    var num = $('li[id=taskOrder]').length+1;
    $("#taskpriority").append('<li id="taskOrder" class="list-group-item list-group-item-dark d-flex justify-content-between align-items-center" draggable="true" style="display: block;">'+name+'<span class="badge badge-dark badge-pill">'+num+'</span></li>').sortable();

});

这将使您添加的新元素可以使用 jquery 的可排序功能进行排序。

编辑/更新

您的“要点”问题是由于您在首次构建可排序元素列表时将元素声明为可排序时添加了 placeHolderClass 属性。

只需将 placeHolderClass 添加到我的代码中的可排序函数。像这样:

$('#addTask').click(function(){
    var name = $("#taskName").val();
    var num = $('li[id=taskOrder]').length+1;
    $("#taskpriority").append('<li id="taskOrder" class="list-group-item list-group-item-dark d-flex justify-content-between align-items-center" draggable="true" style="display: block;">'+name+'<span class="badge badge-dark badge-pill">'+num+'</span></li>').sortable({ placeholderClass: 'list-group-item' });

});

此添加将使它就像您已经开始一样，没有要点。