Линии вложенности для вложенных списков

[jabbascript]

Здравствуйте!!!

Кто может подсказать как сделать для списков на подобии кода ниже, линии вложенности от родителя к дочерним и от родителя к родителю.

4604


<ul>
<li class="item" draggable="true" data-id="1">
<div>item 1</div>
<ul>
<li class="item" draggable="true" data-id="5">
<div>level 2 item 1</div>
<ul>
<li class="item" draggable="true" data-id="8">
<div>level 3 item 2</div>
</li>
</ul>
</li>
<li class="item" draggable="true" data-id="6">
<div>level 2 item 1</div>
<ul>
<li class="item" draggable="true" data-id="9">
<div style="opacity: 1;">level 3 item 1</div>
<ul>
<li class="item" draggable="true" data-id="10">
<div>level 4 item 1</div>
</li>
<li class="item" draggable="true" data-id="11">
<div>level 4 item 2</div>
</li>
<li class="item" draggable="true" data-id="7">
<div>level 3 item 1</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="item" draggable="true" data-id="2" style="opacity: 1;">
<div style="opacity: 1;">item 2</div>
<ul>
<li class="item" draggable="true" data-id="12">
<div>level 2 item 1</div>
</li>
<li class="item" draggable="true" data-id="13">
<div>level 2 item 2</div>
</li>
</ul>
</li>
<li class="item" draggable="true" data-id="3">
<div>item 3</div>
<ul>
<li class="item" draggable="true" data-id="14">
<div>level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1</div>
</li>
<li class="item" draggable="true" data-id="15">
<div>level 2 item 2</div>
</li>
</ul>
</li>
<li class="item" draggable="true" data-id="4">
<div>item 4</div>
</li>
</ul>

[рони]

jabbascript,
https://javascript.ru/ui/tree

https://www.jstree.com/demo/

[jabbascript]

рони,
Спасибо! похоже на то что надо.