3

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

有什么建议么？

树视图的图像

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

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);
    }
}
4

2 回答 2

3

让我们定义treeview：

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

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

  1. 我们不会掉到树外
  2. 我们不会在树的第一个节点之前或之后丢弃

树的定义是：

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.c​​om/api/web/treeview#drop以获取有关drop事件的信息。

于 2012-12-04T23:14:29.057 回答
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。这是另一个解决方案的另一个问题。

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

于 2015-05-14T20:09:26.420 回答