我在一个列表组上使用 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/
最佳答案
您可以将 .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' });
});
此添加将使它就像您已经开始一样,没有要点。
关于javascript - 附加元素上的jquery sortable ui函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52564928/