javascript - 我需要帮助使用 jQuery 的 Kendo UI。我需要能够使用 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>

在我找到的示例中，它们使用的是元素的 ID，并且它们并没有脱离 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 混合吗？

标签： javascriptjquerykendo-ui