1

我在列表组上使用 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/

4

2 回答 2

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

});

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

于 2018-09-29T04:09:18.163 回答
0

您可以像这样更新代码，每次从查询或 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);
        });
    });
}
于 2018-09-29T05:14:07.767 回答