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>');

    });

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

在这里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' });

});

此添加将使您像没有开始一样开始。

Answer 2

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

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);
        });
    });
}

附加元素上的jQuery可排序UI函数

2 个答案: