create children with nested sortable

Question

I'm trying to achieve what I've seen some plugins like this one, but I can't make it work properly.

I want to be able to create new children from a nested sortable, for example: when I drag node "4", I would like to put it under node "xx2" and a little to the right. In that action, the placeholder should indent to the right so it creates a hint that a new branch will appear.

I've managed to create the hint but can't drop into that new space.

IMPORTANT: I know that a possible hack is for each li to have and empty ul, but I need to have a strucutre as shown below. So any new children is created on the fly.

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

FIDDLE: https://jsfiddle.net/wa614ago/5/

Answer 1

I edited your code so the list would behave as you described. Turns out that the $(ul:empty) selector returns empty when a ul has whitespace in it.

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

Here's the fiddle: https://jsfiddle.net/Lsn6aj22/3/

Hope this helps you on the way!