我正在尝试实现我见过的this one等插件，但我无法使其正常工作。
我希望能够从嵌套的sortable中创建新的子元素，例如：当我拖动节点“4”时，我想将它放在节点“xx2”下并稍微向右。在该操作中，占位符应向右缩进，以便创建一个新分支将出现的提示。
我已设法创建提示，但无法进入该新空间。
重要提示： 我知道每个function uniteUnique(/* args */) {
return [].concat.apply([], arguments).reduce(function (acc, v) {
if (!acc[0][v]) acc[0][v] = acc[1].push(v); // assigns new length, i.e. > 0
return acc;
}, [ Object.create(null), [] ])[1];
}
var u = uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
console.log(u);可能存在黑客li，但我需要有一个结构如下所示。因此，任何新的孩子都是即时创建。
HTML
ulJS
<div class="tree">
<ul>
<li>
<a>
<label>
<span>A</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>1</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>x</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>xx1</span>
</label>
</a>
</li>
<li>
<a>
<label>
<span>xx2</span>
</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a>
<label>
<span>2</span>
</label>
</a>
</li>
</ul>
</li>
<li>
<a>
<label>
<span>B</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>3</span>
</label>
</a>
</li>
<li>
<a>
<label>
<span>4</span>
</label>
</a>
</li>
<li>
<a>
<label>
<span>5</span>
</label>
</a>
</li>
</ul>
</li>
<li>
<a>
<label>
<span>C</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>6</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>y</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>yy1</span>
</label>
</a>
<ul>
<li>
<a>
<label>
<span>yyy1</span>
</label>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
$("div.tree ul").sortable({
items: "li",
connectWith: "ul",
placeholder: "placeholder",
toleranceElement: "> a",
opacity: 0.5,
sort: function( event, ui )
{
$("ul:empty").remove();
var prev_li = ui.placeholder.prev("li");
if(prev_li.length)
{
if(ui.helper.position().left > prev_li.position().left + 50)
{
if(!prev_li.children("ul").length)
{
prev_li.append("<ul class='new'></ul>");
}
}
}
},
stop: function( event, ui )
{
$("ul.new:empty").remove();
}
}).disableSelection();
答案 0 :(得分：2)
我编辑了你的代码，所以列表的行为与你描述的一样。事实证明，当ul中有空格时，$(ul:empty)选择器返回空。
$("div.tree ul").sortable({
items: "li",
connectWith: "ul",
placeholder: "placeholder",
toleranceElement: "> a",
opacity: 0.5,
sort: function(event, ui) {
$("ul.ui-sortable:empty").remove();
var prev_li = ui.placeholder.prev("li");
if (prev_li.length) {
if (ui.helper.position().left > prev_li.position().left + 50) {
// If the current element has some empty ui sortables
prev_li.find("ul:not(:has(li))").remove();
// If the li has no ul's
if (!prev_li.children("ul").length
//or if the ul contains the element that we are currently dragging then we append the new ul
|| prev_li.children("ul").find('li').first().hasClass('ui-sortable-helper')) {
// If there's any other new elements in the list, remove them
$("ul.new:empty").remove();
//append hint
prev_li.append("<ul class='new'></ul>");
}
}
}
},
out: function(event, ui) {
// As we move out of a drop zone we clean it from old uls
var prev_li = ui.placeholder.prev("li");
prev_li.find('ul.new').remove()
prev_li.find('ul.ui-sortable:empty').remove()
},
stop: function(event, ui) {
// We drop our element into the new ul
$('ul.new').removeClass('new').append(ui.item);
// Clean the whole list of empty ul's
$("ul:empty").remove();
$("ul.ui-sortable:empty").remove();
}
}).disableSelection();
这是小提琴：https://jsfiddle.net/Lsn6aj22/3/
希望这可以帮助你！