Я пытаюсь использовать draggable, droppable и sortable для создания вложенных списков. Я хочу перетащить (клонировать) элементы из предустановленных списков в контейнер с возможностью создания вложенных списков. На диаграмме ниже показан простой пример. 
Ниже приведен мой код (обратите внимание, что это всего лишь фрагмент моего проекта, и он может ссылаться на вещи, которых нет в фрагменте кода), который позволяет мне перетаскивать элементы в контейнер и сортировать их.
Но я не могу вложить их для создания подсписки. Если я создам предопределенный список в контейнере, я могу отсортировать/вложить их. Это как проблема с перетаскиванием.
Просматривая документы jQuery и подобные вопросы здесь, на SO, мне не ясно, как это сделать. Любая помощь будет оценена, спасибо!
$( "#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>Обновлять
У меня работает вложение, но я не могу вкладывать элементы в перетаскиваемые элементы, которые были перетащены в контейнер. Перетаскивание нового элемента в контейнер может быть вложенным, но любые существующие или новые элементы не могут быть вложены. Я думаю, что это проблема класса, но не могу понять это. Обновленная скрипка:
$("#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>