Javascript-форум - Линии вложенности для вложенных списков

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

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

Вложение 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>