使用JQuery UI（可移动）将一个项目移到另一个项目上时动态创建子类别

Question

下午好。在使用JQuery UI（可排序）对元素进行排序时，提示任何想法，或者在可能的情况下，提示示例如何实现子类别的动态创建。我想达到这样一种效果：当您拖动dom元素ui.item（在排序时）时，如果您在列表中另一个项目上方找到了一个被拖动的项目，则会为您在其中每个项目创建一个动态子类别可以移动该项目（在带有伺服标记（[class =“ just-for-example”]的html标记中）（但仅显示当前正在移动该项目的项目）。（我已经实现了，毁灭性的类别（已从标记中删除）。我大致了解需要做什么，只是无法确定拖动的元素是哪个元素。

(function () {

        let category = '#menu-left > ul > li > ul';
        let subCategory = '#menu-left > ul > li > ul > li > ul';

        sortCategory();
        sortSubCategory();

        // sort categories
        function sortCategory() {
            $(category).sortable({
                connectWith: subCategory,
                placeholder: 'placeholder',
                forcePlaceholderSize: true,
                change: function(event, ui) {
                    //console.log('[CATEGORY]', ui.item);
                },
                receive: function (event, ui) { // if [SUB CATEGORY] is Empty, then remove it and label.
                    if (ui.sender && ui.sender.children().length === 0) {
                        ui.sender.siblings('a').remove(); // a.label
                        ui.sender.parent().remove(); // li [just-for-example]
                        ui.sender.remove(); // ul
                    }
                },
                start: function (event, ui) { // maybe create all items, hidden [SUB CATEGORY]

                },
                stop: function (event, ui) { // remove empty [SUB CATEGORIES]

                }
            });
        }

        // sort sub categories
        function sortSubCategory() {
            $(subCategory).sortable({
                connectWith: category,
                placeholder: 'placeholder',
                forcePlaceholderSize: true,
            });
        }



        // add item chanel
        $(document).on('click', '#menu-left .btn-add', function (e) {
            e.preventDefault();
            let $ul = $(this).parents('a').siblings('ul');
            $ul.append(`<li><a href="item item-custom-chanel">Chanel - ${$ul.children().length}</a></li>`);
        });

        $(document).on('click', '#menu-left a', function (e) {
            e.preventDefault();
        });
    })();

* {margin: 0;padding: 0}
    body{background-color: #DDD; height: 100vh; font-family: Arial;}

    #menu-left{
        position: relative;
        max-width: 250px;
        margin: 50px auto 0;
    }
    #menu-left ul {
        list-style: none;
        margin-left: 25px;
    }
    #menu-left li a {
        display: block;
        background-color: #FFF;
        margin: 1px 0;
        padding: 3px;
        text-decoration: none;
        color: #333;
        user-select: none;
    }
    #menu-left .sub-category{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #menu-left .placeholder{
        border: dashed 1px darkgreen;
    }
    #menu-left .btn-add{
        display: block;
        padding: 1px 4px;
        background-color: #CCC;
        border-radius: 2px;
    }


    /* need */
    #menu-left .just-for-example{
        margin-bottom: 10px;
    }
    #menu-left .just-for-example a {
        background-color: darkgrey;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
  

<div id="menu-left">
    <ul>
        <li>
            <a href="" class="label sub-category"><span>Sub Category</span><i class="btn-add">+</i></a>
            <ul>
                <!-- NEED AUTO GENERATE GROUP -->
                <li class="just-for-example">
                    <a href="" class="label sub-category"><span>Sub Category</span><i class="btn-add">+</i></a>
                    <ul>
                        <li><a href="item item-custom-chanel">Chanel - 1</a></li>
                        <li><a href="item item-custom-chanel">Chanel - 2</a></li>
                        <li><a href="item item-custom-chanel">Chanel - 3</a></li>
                    </ul>
                </li>
                <!-- NEED AUTO GENERATE GROUP -->

                <li><a href="item item-custom-chanel">Chanel - 4</a></li>
                <li><a href="item item-custom-chanel">Chanel - 5</a></li>
                <li><a href="item item-custom-chanel">Chanel - 6</a></li>
            </ul>
        </li>
    </ul>

</div>

标记中的灰色是将ui.itum移植到其他1个元素上方（移动到其上方）时想要实现的示例