所以我有一个嵌套的jqueryui可排序项和一个可拖动的项目,我可以将副本拖到任何可排序的级别。
请参阅jsfiddle http://jsfiddle.net/rmossuk/JUnA7/4/
的newitem
问题是当我将NewItem拖到嵌套的sortable(Item3)中时,接收事件被调用3次。一旦产品可以分类,出于某种原因两次为Item3排序!! ??
我需要它,以便只调用Item3可排序的接收事件而不是其他2。
有人知道怎么做吗?
非常感谢
答案 0 :(得分:0)
嘿,如果你可以妥协使用ol和li,我会改变你的代码 如果适用于您的
,请尝试使用此代码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
答案 1 :(得分:0)
错误是由于div.sortable嵌套在另一个div.sortable中,所以当你放入一个新元素时它会触发排序两次。我想出的解决方法只计算特定drop中添加的元素数量,并在重复项中添加一个名为“deleteMe”的类。
然后你只需要调用$(“。deleteMe”)。在排序结束时删除()以删除附加内容。
不理想,但似乎对我有用。 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
});
});
<强>已更新强>
另外,我注意到排序占位符也是重复的。所以我通过将它们的高度设置为0px来删除重复项。
start: function(event, ui) {
dropCount=0;
var placeholders=0;
$(".ui-sortable-placeholder").each(function(){
placeholders=placeholders+1;
if(placeholders>1)
$(this).height(0);
});
}
答案 2 :(得分:0)
我认为您需要阻止事件传播,例如:
event.stopPropagation();
我使用jsfiddle在一些地方快速尝试但是它不能立即工作,所以你可能需要编写更多的代码。