Telerik kendo treeview - 防止拖到父级之外答案

【问题标题】：telerik kendo treeview - prevent dragging outside of parentTelerik kendo treeview - 防止拖到父级之外
【发布时间】：2012-12-04 20:45:37
【问题描述】：

我试图阻止在父节点（“LLCA”）之外拖放节点，但没有运气。

有什么建议吗？

Image of Treeview

我最终使用下面的代码让它工作：

function onDrop(e) {
    var dst = e.destinationNode;
    var first = $('.k-item:first');
    var pos = e.dropPosition;
    if (dst && dst.uid === first.uid && pos !== "over") {
        e.setValid(false);
    }
}

【问题讨论】：

标签： drag-and-drop telerik treeview kendo-ui

【解决方案1】：

让我们定义treeview：

var tree = $("#tree").kendoTreeView({
    dataSource :content,
    dragAndDrop:true
}).data("kendoTreeView");

我要做的是添加一个drop 回调，我将控制它：

我们不会掉到树外
我们不会在树的第一个节点之前或之后删除

树的定义是：

var tree = $("#tree").kendoTreeView({
    dataSource :content,
    dragAndDrop:true,
    drop       :function (ev) {
        var dst = tree.dataItem(ev.destinationNode);
        var first = tree.dataItem(".k-item:first");
        var pos = ev.dropPosition;
        if (dst && dst.uid === first.uid && pos !== "over") {
            console.log("invalid");
            ev.setValid(false);
        }
    }
}).data("kendoTreeView");

查看http://docs.kendoui.com/api/web/treeview#drop 以获取有关drop 事件的信息。

【讨论】：

如果我使用 MVC 包装器，我该怎么做？ code@(Html.Kendo().TreeView().....code我可以使用这个捕获拖动事件：code$(".k-treeview").data("kendoTreeView") .bind("drop", function (e) { }); code
@OnaBai 您能否确认一下 kendo 2015 Q2 上的 setValid 函数（它不起作用，并且可能是一个错误）它正在 kendo 2015 SP 1、SP 2 上运行。
@OnaBai 问题：什么是“uid？”
@TomStickel uid 代表唯一标识符

【解决方案2】：

因为我无法评论答案，所以我会自己写。

用户 Mithrilhall 询问有关 MVC 包装器的问题，最佳答案也仅阻止移动到根节点。

我将尝试回答 Mithrilhall 并提供一个示例，即您只能在其父级的上下文中移动一个子级。换句话说，只允许任何父母的孩子在父母中改变他们的顺序。

首先，对于 MithrilHall，这是您在 MVC 中获取事件的方式。

@(Html.Kendo().TreeView()
            .Name("ourTreeView")
            .Events(e => e.Drop("treeViewDrop"))

treeview 中还有其他事件，你可以自己去看看。参数是 javascript 函数的名称。这是此 MVC 包装器的示例 javascript 函数，用于防止子级移动到其父级之外，但允许它们仍然在父级内移动。

<script type="text/javascript">
    function treeViewDrop(dropEvent) {
        var treeView = $("#ourTreeView").data("kendoTreeView");
        var destination = treeView.dataItem(dropEvent.destinationNode);
        var source = treeView.dataItem(dropEvent.sourceNode);

        if (!(destination && destination.parentID == source.parentID)) {
            dropEvent.setValid(false);
        }
    }
</script>

我的数据源中有一个 parentID 字段建模。您可以通过多种方式实现这一点。 dataItem 方法返回一个剑道树视图项，因此它包含所有建模字段。

另外请理解，当您移动到无法降落的地方时，此解决方案不会将小部件更改为显示 X。这是另一个解决方案的另一个问题。

我希望这会有所帮助，祝你好运！

【讨论】：