JSFiddle - React, Tailwind, and code Playground

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

.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: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();