创建具有嵌套可排序的子级

Question

我正在尝试实现我所看到的一些插件，例如this one，但我无法使其正常工作。

我希望能够从嵌套的可排序对象中创建新的子节点，例如：当我拖动节点“4”时，我想将其放在节点“xx2”下并稍微靠右一点。在该操作中，占位符应向右缩进，以便提示将出现新分支。

我已成功创建提示，但无法进入那个新空间。

重要提示：我知道每个li 都拥有和空ul 可能会被破解，但我需要有一个如下所示的结构。所以任何新的孩子都是动态创建的。

HTML

<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>

JS

$("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();

CSS

 .placeholder { height: 20px; border: 1px dotted red;}
 ul.new {border: 1px dashed blue; height: 20px;}

小提琴：https://jsfiddle.net/wa614ago/5/

Answer 1

我编辑了您的代码，因此列表的行为与您描述的一样。事实证明，当 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/

希望这对您有所帮助！