Javascript 附加元素上的jquery可排序ui函数

我在一个列表组上使用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>');

    });

$（'#addTask'）。单击（函数（）{
变量名称=$（“#任务名称”）.val（）；
var num=$（'li[id=taskOrder]'）。长度+1；
$（“#taskpriority”）.append（“
“+name+”+num+”
”）；
});

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

---

下面是一个JS示例

您只需将

.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();

});

$('#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' });

});

---

这个添加将使它看起来像是您必须启动的，没有要点。

您可以像这样更新代码，每次从查询或javascript添加新元素时，我们都需要初始化short

InitShort() //initialize first time
$('#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>');

    InitShort()//initialize after add new item time

    });


 function InitShort() {

$('.list-group-sortable').sortable({
        placeholderClass: 'list-group-item'
    }).bind('sortupdate', function(e, ui) {
        $('li[id=taskOrder]').each(function(index, element){
            $(this).find('span').html(index+1);
        });
    });
}

InitShort（）//第一次初始化
$（“#添加任务”）。单击（函数（）{
变量名称=$（“#任务名称”）.val（）；
var num=$（'li[id=taskOrder]'）。长度+1；
$（“#taskpriority”）.append（“
“+name+”+num+”
”）；
InitShort（）//在添加新项目时间后初始化
});
函数InitShort（）{
$（'.list group sortable'）。可排序({
占位符类：“列表组项目”
}).bind（'sortupdate'，函数（e，ui）{
$（'li[id=taskOrder]'）。每个（函数（索引，元素）{
$（this.find（'span'）.html（索引+1）；
});
});
}

注意-您正在复制

id

s->

.append（'您可以简单地添加
$（“.list group sortable”）.sortable（“刷新”）
在添加新的
li
列表项后。肖恩还指出了复制
ID
的问题。ID应该是唯一的，不能重复。这里有一个@NewToJS，它确实可以排序。但是动画很奇怪，左边出现了一个项目符号。@user2989367这听起来与
css的问题不同
。正如您从我提供的中看到的，它没有显示要点。@NewToJS是的，它显示了我们只是没有看到它们，在这里我将它放在一个容器中向您展示。这修复了前面评论中提到的可排序问题，但它添加了一个要点并打破了css，如图所示。是否有不同的解决方案或改进t的方法他的？我的更新向您展示了如何“修复”您正在描述的问题。要点不存在是因为您在使列表可排序时应用了css类，css类只需再次应用于可排序函数属性。请检查上面的编辑。