因此,我有一个嵌套的jqueryui可排序项和一个可拖动项,我可以将副本拖动到任何级别的可排序项中。
请参阅此处的jsfiddlehttp://jsfidle.net/rmossuk/juna7/4/
纽维特姆
问题是,当我将NewItem拖到嵌套的可排序表(Item3)中时,receive事件会被调用3次。一次用于产品可排序,由于某种原因两次用于项目可排序!!??
我需要它,以便只调用Item3可排序的接收事件,而不是其他2。
有人知道怎么做吗??
多谢
该错误是由于div.sortable嵌套在另一个div.sortable中而导致的,因此当您放入一个新元素时,它会触发两次排序。我想出的解决办法只是计算在特定drop中添加的元素的数量,并将一个名为“Delete Me”的类添加到重复的元素中。
然后只需在排序的末尾调用$(“.deleteMe”).remove()来删除附加项。
不是很理想,但似乎对我有用。http://jsfidle.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
});
});
已更新
此外,我注意到排序占位符a也重复了..所以我将它们的高度设置为0px来移除重复。
start: function(event, ui) {
dropCount=0;
var placeholders=0;
$(".ui-sortable-placeholder").each(function(){
placeholders=placeholders+1;
if(placeholders>1)
$(this).height(0);
});
}
嘿,我改变了你的代码一点,如果你可以妥协使用ol和李,给这个代码一个尝试,如果它为u工作
HTML
<div class="container">Product1
<ol class="sortable">
<li>Item1</li>
<li>Item2</li>
<li name="to item3">Item3
<ol>
<li class="inner">Item5</li>
<li class="inner">Item6</li>
</ol>
</li>
<li>Item4</li>
<li name="new item moved">New Item</li>
</ol>
</div>
jQuery
$(document).ready(function(){
$('ol.sortable').nestedSortable(
{
disableNesting: 'no-nest',
forcePlaceholderSize: true,
handle: 'div',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
connectWith: '.sortable',
stop: function(event, ui){
var element = $(ui.item).attr("name");
var parent = $(ui.item).parent().attr("name");
alert(element);
alert(parent);
}
});
});
CSS
li {
margin-left: 10px;
margin-top: 10px;
}
.inner{
margin-left: 40px;
}
不要忘记包含NestedSortable.js和最新的Jquery