这个错误是由于一个 div.sortable 嵌套在另一个 div.sortable 中,因此当您放置一个新元素时,它会触发两次排序。我想出的解决方法只是计算特定拖放中添加的元素数量,并将一个名为“deleteMe”的类添加到重复项中。
然后,在排序结束时,只需调用 $(".deleteMe").remove() 来删除多余的元素。
虽然不是理想的解决方案,但对我来说似乎可以工作。http://jsfiddle.net/JUnA7/72/
$(function() {
var dropCount=0;
$(".sortable").sortable({
connectWith: ".sortable",
cursor: 'pointer',
receive: function(event, ui) {
dropCount=dropCount+1;
if(dropCount>1)
$(ui.item).addClass("deleteMe");
console.log(dropCount);
},
start: function(event, ui) {
dropCount=0;
var placeholders=0;
$(".ui-sortable-placeholder").each(function(){
placeholders=placeholders+1;
if(placeholders>1)
$(this).height(0);
});
},
stop: function(event, ui) {
$(".deleteMe").remove();
dropCount=0;
}
});
$(".draggable").draggable({
handle: ".icon-move",
connectToSortable: ".sortable",
appendTo: "body",
helper: 'clone',
distance: 30
});
});
更新
另外,我注意到排序占位符也是重复的...所以我通过将它们的高度设置为0像素来删除了重复项。
start: function(event, ui) {
dropCount=0;
var placeholders=0;
$(".ui-sortable-placeholder").each(function(){
placeholders=placeholders+1;
if(placeholders>1)
$(this).height(0);
});
}