Мне нужна помощь в использовании Kendo UI для jQuery. Мне нужно иметь возможность перетаскивать элементы из одного представления списка в другое представление списка с помощью класса css

Question

Я работаю над приложением, которое имеет 2 просмотра списка.

В первом просмотре списка перечислены продукты, которые могут иметь подпродукты. Вот как выглядит html:

<div id="products-list" style="width: 100%;" data-role="listview" class="k-widget k-listview" role="listbox">
    <div class="item" data-uid="" role="option" aria-selected="false">
        Product 1
    </div>
    <div class="sub-item" data-uid="" role="option" aria-selected="false">
        Product 1 - Sub Product 1
    </div>
    <div class="sub-item" data-uid="" role="option" aria-selected="false">
        Product 1 - Sub Product 2
    </div>
    <div class="sub-item" data-uid="" role="option" aria-selected="false">
        Product 1 - Sub Product 3
    </div>
    <div class="item" data-uid="" role="option" aria-selected="false">
        Product 2
    </div>
    <div class="sub-item" data-uid="" role="option" aria-selected="false">
        Product 2 - Sub Product 1
    </div>
    <div class="sub-item" data-uid="" role="option" aria-selected="false">
        Product 2 - Sub Product 2
    </div>
</div>

<div id="selected-products-list" style="width: 100%;" data-role="droptarget" class="k-widget k-listview" role="listbox">

</div>

В примерах, которые я нахожу, они используют идентификатор элемента и не выходят из класса css.

Я попытался основать свой код на следующем: https://demos.telerik.com/kendo-ui/dragdrop/index

<script>
    function draggableOnDragStart(e) {
        //$("#draggable").addClass("hollow");
        $("#selected-products-list").text("Drop here.");                    
    }

    function droptargetOnDragEnter(e) {
        //$("#droptarget").text("Now drop...");
        //$("#droptarget").addClass("painted");
    }

    function droptargetOnDragLeave(e) {
        //$("#droptarget").text("Drop here.");
        //$("#droptarget").removeClass("painted");
    }

    function droptargetOnDrop(e) {
        //$("#droptarget").text("You did great!");
        //$("#draggable").removeClass("hollow");
    }

    function draggableOnDragEnd(e) {
        var draggable = $("#selected-products-list");

        if (!draggable.data("kendoDraggable").dropped) {
            // drag ended outside of any droptarget
            $("#selected-products-list").text("Try again!");
        }

        draggable.removeClass("hollow");
    }

    $(document).ready(function() {
        $(".item").kendoDraggable({
            hint: function() {
                return $(".item").clone();
            },
            dragstart: draggableOnDragStart,
            dragend: draggableOnDragEnd
        });

        $("#selected-products-list").kendoDropTarget({
            dragenter: droptargetOnDragEnter,
            dragleave: droptargetOnDragLeave,
            drop: droptargetOnDrop
        });

        var draggable = $("#selected-products-list").data("kendoDraggable");

        $("#cursorOffset").click(function(e) {
            if (this.checked) {
                draggable.options.cursorOffset = { top: 10, left: 10 };
            } else {
                draggable.options.cursorOffset = null;
            }
        });

    });
</script>

Я также подумал, что было бы неплохо развернуть / свернуть элемент продукта, чтобы показать подпункты. Можно ли смешивать с Кендо и обычным jquery?