javascript - Kendo TreeView 移动父节点以更改排序顺序，但不允许将父节点拖到子节点下

Question

我有 Kendo TreeView，其中父节点有子节点。

我想要的规则是用户可以

1. 将父节点拖动到当前位置的上方或下方，从而改变排序顺序
2. 不允许将父节点拖到另一个父节点上
3. 不允许将父节点拖到任何子节点上
4. 允许将子节点项拖到另一个父节点下

我当然更喜欢 javascript 或 jquery

这段代码只是阻止所有父节点被拖动，因此这不是我想要的。有人有这方面的样本吗？

 $(".k-treeview").data("kendoTreeView").bind("dragstart", function (e) {
    if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
       e.preventDefault();
    }
});

更新答案

如果我将它放在我的 $(document).ready(function() { ...

中，似乎几乎所有代码都可以从答案中纠正

但是如果我将该代码放在 onDrop 下，则不会被调用。

例如

  var treeview = $("#treeview").kendoTreeView({
                                    expanded: true,
                                    dragAndDrop: true,
                                    select: onSelect,
                                    loadOnDemand: false,
                                    dataSource: homogeneous,
                                    dataTextField: "ReportGroupName",
                                    template: kendo.template($("#treeview-template").html()) //,
                                    ,
                                    onDrop: function(e) {
                                        kendoTreeView = $(".k-treeview").data("kendoTreeView");
                                        kendoTreeView.bind("drag", function (e) {

                                            //Check if we're trying to add the node as a child
                                            var dropAsChild = $(e.dropTarget).hasClass("k-in k-state-hover");

                                            var sourceDataItem = kendoTreeView.dataItem(e.sourceNode);
                                            var destinationDataItem = kendoTreeView.dataItem(e.dropTarget);

                                            if ($(e.sourceNode).is(e.dropTarget)) {
                                                //Dropping on itself
                                                e.setStatusClass("k-denied");
                                            } else if (destinationDataItem && !dropAsChild) {
                                                //Dropping as a sibling... that's ok if it's the same parent
                                                if (sourceDataItem.parent().uid != destinationDataItem.parent().uid) {
                                                    //Not the same parent
                                                    e.setStatusClass("k-denied");
                                                }
                                            } else {
                                                e.setStatusClass("k-denied");
                                            }
                                        });
                                    }

                                }).data("kendoTreeView");

图像 这是一个图像，红色箭头指向我要移动到另一个父级的子级(成为带有蓝色箭头的父级的子级)

Answer 1

dragstart 事件的问题在于，它不会为您提供放置目标，因为它位于事件序列的早期。

实现此目的的最佳方法是根据源节点和目标节点拒绝删除操作。您可以通过在传递给 drag 事件的事件对象上调用 setStatusClass(使用 k-denied)来完成此操作。

var treeview = $("#treeview").kendoTreeView({
    expanded: true,
    dragAndDrop: true,
    select: onSelect,
    loadOnDemand: false,
    dataSource: homogeneous,
    dataTextField: "ReportGroupName",
    template: kendo.template($("#treeview-template").html()),
    drag: function (e) {
        //Check if we're trying to add the node as a child
        var kendoTreeView = $("#treeview").data("kendoTreeView");
        var dropAsChild = $(e.dropTarget).hasClass("k-in k-state-hover");

        var sourceDataItem = kendoTreeView.dataItem(e.sourceNode);
        var destinationDataItem = kendoTreeView.dataItem(e.dropTarget);

        if ($(e.sourceNode).is(e.dropTarget)) {
            //Dropping on itself
            e.setStatusClass("k-denied");
        } else if (destinationDataItem && !dropAsChild) {
            //Dropping as a sibling... that's ok if it's the same parent
            if (sourceDataItem.parent().uid != destinationDataItem.parent().uid) {
                //Not the same parent
                e.setStatusClass("k-denied");
            }
        } else {
            e.setStatusClass("k-denied");
        }
    }
}).data("kendoTreeView");

我现在无法测试上面的代码，因此它们可能存在一些错误...我相信您仍然会理解其背后的逻辑。