Drag n drop

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
               ...

CSS

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

JavaScript

$("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) {
		
			// You can tweak this this to make the drop zone
      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();
          prev_li.append("<ul class='new'></ul>");
        }
      }
    }
  },
  out: function(event, ui) {
		// When we move out of a ul 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 array of empty ul's
    $("ul:empty").remove();
    $("ul.ui-sortable:empty").remove();
  }
}).disableSelection();