Динамическое создание подкатегории при перемещении элемента над другим элементом с помощью пользовательского интерфейса JQuery (сортируемый) - PullRequest
0 голосов
/ 11 июля 2019

Добрый день. Подскажите любую идею или, если возможно, пример того, как реализовать динамическое создание подкатегории при сортировке элемента с помощью JQuery UI (Sortable). Я хотел бы добиться такого эффекта, чтобы при перетаскивании элемента dom ui.item (во время сортировки), когда вы находили перетаскиваемый элемент над другим элементом в списке, для каждого элемента, в который вы можете переместить, была создана динамическая подкатегория. элемент (в html-разметке с сервомаркой ([class = "just-for-example"]) (но отображался только тот, над которым элемент в данный момент перемещается). (Уже реализованный, как я мог, с опустошением категория была удалена из разметки). Я примерно понимаю, что нужно сделать, я просто не могу определить, над каким элементом находится перетаскиваемый элемент.

(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 элементом (переместиться над которым он расположен)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...