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

Question

我在列表組上使用 jquery 的 sortable 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添加到我的代碼中的 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' });

});

此添加將使它像您開始時一樣，沒有項目符號。

Answer 2

您可以像這樣更新代碼，每次從查詢或 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);
        });
    });
}