JQuery：拖放，排序嵌套列表

Question

我试图使用可拖动，可放置和＆amp;可排序以创建嵌套列表。我希望将项目从预设列表拖动（克隆）到能够创建嵌套列表的容器。下图显示了一个简单的示例。

下面是我的代码（请注意，这只是我项目的片段，可能会引用不在代码段中的内容），这样我就可以将项目拖到容器中并对其进行排序。
但我无法将它们嵌套以创建子列表。如果我在容器中创建预定义列表，我可以对它们进行排序/嵌套。它就像拖拽一样是问题 在这里查看jQuery文档和类似问题，我不清楚如何做到这一点。任何帮助将不胜感激，谢谢！

＆＃13;

＆＃13;

$( "#draggable-elements li" ).draggable({
  appendTo: "body",           
  helper: "clone"
});
$( ".logic-container ul" ).droppable({
  activeClass: "ui-state-default",
  hoverClass: "highlight",            
  accept: ":not(.ui-sortable-helper)",
  greedy: true,
  drop: function( event, ui ) {
    $( this ).find( ".placeholder" ).hide();
    $(ui.draggable).clone().appendTo(this);
  }
});

$(".logic-container ul").sortable({
  connectWith: ".logic-container ul",
  items: "li:not(.placeholder)",
  sort: function() {
    $( this ).removeClass( "ui-state-default" );
  }
});

＆＃13;

.dropped {
  border-radius: 3px;
  border: 1px dashed #999;     
  width: 90%;  
  line-height: 35px;
  font-weight: 400;
  height: 300px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<ul id="draggable-elements">
  <li class="elements">Item 1<ul></ul></li>
  <li class="elements">Item 2<ul></ul></li>
  <li class="elements">Item 3<ul></ul></li>
</ul>

<div class="logic-container">
  <ul class="dropped">            
  </ul>          
</div>

＆＃13;

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/x16texhg/

更新

我让嵌套工作，但我无法在拖入容器的拖动项目中嵌套项目。可以嵌套将新项目拖动到容器中，但不能嵌套任何现有项目或新项目。我认为这是一个阶级问题，但似乎无法弄明白。更新了小提琴：

＆＃13;

＆＃13;

$("#example1 li").draggable({
  helper: "clone",
  connectToSortable: "#example5 ul"
});

$("#example5 ul").sortable({
  connectWith: "#example5 ul",
  placeholder: "ui-state-highlight",
  toleranceElement: "ul"
});

＆＃13;

ul {min-height:20px; background:red; clear:both;}
li {list-style:none; margin:0; padding:10px; background:#eee; border:1px solid #ccc;}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<ul id="example1">
  <li><div>New Item</div><ul></ul></li>    
</ul>

<div id="example5"> 
  <ul>        
    <li ><div>Item 2</div><ul></ul>
      <ul> 
        <li ><div>Item 1 1</div><ul></ul></li> 
        <li ><div>Item 1 2</div><ul></ul></li> 
        <li ><div>Item 1 3</div><ul></ul></li> 
      </ul> 
    </li>         
  </ul> 
</div>

＆＃13;

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/carbongixxer/x16texhg/2/