我正在使用 jquery 模板动态创建一个列表(列),其中包含不同的项目(它们也是动态添加的),并且还创建了一个插件,可以帮助将项目从一个列表移动到第二个或第三个列表,即使用 jquery ui 拖动 & drop,但在将项目拖放到新添加的列表时遇到问题。
场景:当我单击“添加列表”按钮时,它会在页面上创建列表。因此,我添加了一个名为“list1”的列表,每个列表都有一个用于在列表中添加项目的按钮,因此通过按两次按钮,我在“list1”上添加了 2 个项目。并且项目是可移动/可拖动/可放置的。现在添加了第二个名为“list2”的列表。因此,如果我尝试将项目从“list1”移动到“list2”,它不会执行此操作,而是将项目移动到“list1”。这是在没有重新加载页面的情况下发生的,但如果我刷新页面并执行相同的操作,现在该项目可以移动到“list2”。这是我用于拖放目的的代码(以下代码放置在我的 jquery 插件中):
var id = $('.' + options.dropID);
var id0 = options.dropID;
$('.' + options.dropID).sortable({
helper: "clone",
revert: "invalid", // go back to original droppable when drop outside drop area
connectWith: '.' + options.dropID,
over: function (event, ui) {
// may be usefull
var sortableElement = this;
var dataToSave = {
name: ui.item.text(),
objid: ui.item.attr('title'), // id has changed for array so use original id stored in title
thisID: $(sortableElement).attr('id'),
array: $(sortableElement).sortable("serialize")
};
// save the new data
saveData(dataToSave);
}
});
所以我注意到一个行为,不同的行为在这里: - 添加了一个项目并且没有页面加载,它添加了以下 div
<div id="337" class="cardItem droppable"> </div>
因此,如果我尝试在此处添加项目,它不允许我这样做。
页面加载后,将上面的div修改为:
它将 ui-sortable 添加到类属性中。所以我尝试搜索这个ui-sortable
是如何或何时添加的,它是通过jquery的sortable方法完成的。
在页面加载时,我像这样调用插件:
<script type="text/javascript">
$(window).bind("load", function () {
$('.laneList').ListDragandDrop();
});
</script>
我还在添加新列表或项目后调用了ListDragandDrop(),但它没有将ui-sortable
添加到div,并且我必须刷新页面,以便它可以使“list2” ' 可丢弃的。你能告诉我我做错了什么或者我应该修改什么才能使它工作吗?
最佳答案
JQuery 可排序似乎已在最新版本中修复了创建后添加的项目。如果您仍然遇到此问题,请添加 jsfiddle,以便我们帮助调试。
关于jquery - 在我刷新页面之前将新项目移至新添加的列表时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7619653/