我拥有的是一个两个可排序列表,其中一个列表填充了一组项目。用户应该能够在这些列表之间进行排序。 他们还应该能够创建新列表,并且还可以添加初始项目。因此可排序元素是静态的,但可排序列表是动态的。
最初的两个列表会触发可排序事件,并且工作正常。然而,问题在于动态添加的列表。添加它们没有问题,您可以将项目分类到其中。问题是没有触发任何事件,例如“接收”或“激活”,因此当我将元素拖动到新列表之一时,我想获取列表的 id,但它永远不会触发其中任何一个事件。
这是一个简单的 fiddle JS Fiddle
$(".connectedSortable").sortable({
connectWith: '.connectedSortable',
receive: function(event, ui) {
var receivingID = ui.item.parent('ul').attr('id');
console.log('receiving id :' + receivingID);
}}).disableSelection();
这似乎永远不会在动态添加的列表上运行
function makeSortable(id) {
console.log(id);
$("#" + id).sortable({
connectWith: ".connectedSortable"
,
activate: function(event, ui) {
console.log("activated list" + id);
}}
).disableSelection(); }
这是当用户添加另一个列表时运行的内容。
最佳答案
这是 JS Fiddle 的更新,已解决问题。 LINK!
$(".connectedSortable").sortable(...)
block 需要在 $('#add_new_list').click(.. .)
函数。 .sortable(...)
代码为所有现有项目添加可排序功能,但不为将来的项目添加可排序功能。
我所做的更改将 .sortable(...)
包装在一个名为 refreshHooks()
的函数中,该函数在页面加载时运行,并且每次“单击“添加新列表”。
$(document).ready(function () {
function makeSortable(id) {
console.log(id);
$("#" + id).sortable({
connectWith: ".connectedSortable",
activate: function (event, ui) {
console.log("activated list" + id);
}}
).disableSelection();
}
var list_counter = 2;
$('#add_new_list').click(function () {
$('#add_new_list').before($(
'<ul id="list' + list_counter + '"' +
' class="connectedSortable"></ul>'
));
var lists = {};
lists.list_id = ['list' + list_counter];
makeSortable(lists.list_id);
list_counter++;
refreshHooks();
});
function refreshHooks() {
$(".connectedSortable").sortable({
connectWith: '.connectedSortable',
receive: function (event, ui) {
var receivingID = ui.item.parent('ul').attr('id');
console.log(receivingID);
},
activate: function (event, ui) {
console.log("activated list");
}
}).disableSelection();
}
refreshHooks();
});
关于javascript - jQuery UI Sortable Widget动态添加列表不触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37369684/