问：

我正在尝试使用draggable，droppable和sortable来创建嵌套列表。我希望将项目从预设列表拖动（克隆）到一个能够创建嵌套列表的容器中。下图显示了一个简单的示例。

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

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

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

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

jsfiddle：https://jsfiddle.net/x16texhg/

更新

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

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

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

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

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

jsfiddle：https://jsfiddle.net/carbongixxer/x16texhg/2/

jQuery jquery-ui-sortable jquery-ui-draggable 嵌套列表 jquery-ui-droppable

JQuery：拖放、排序嵌套列表

JQuery: Drag, drop, sort nested list

更新

评论