drag-and-drop - kendo - treeview angularjs

telerik kendo treeview-previene el arrastre fuera del padre

Question

Estoy tratando de evitar el arrastre y caída de nodos fuera del nodo principal ("LLCA") sin suerte.

¿Alguna sugerencia?

Imagen de Treeview

Terminé haciéndolo funcionar usando tu código a continuación:

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

Answer 1

Vamos a definir la vista de treeview :

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

Lo que voy a hacer es agregar una drop llamada donde controlaré eso:

1. No estamos cayendo fuera del árbol
2. No estamos cayendo antes o después del primer nodo del árbol

La definición del árbol sería:

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");

Consulte http://docs.kendoui.com/api/web/treeview#drop para obtener información sobre el evento de drop .

Answer 2

Como no puedo comentar una respuesta, escribiré la mía.

El usuario Mithrilhall preguntó sobre los envoltorios de MVC, también la respuesta superior solo evita el movimiento al nodo raíz.

Intentaré responder tanto a Mithrilhall como a un ejemplo en el que solo se puede mover un niño dentro del contexto de su padre. Para decirlo de otra manera, para permitir que los hijos de cualquier padre cambien su orden dentro del padre.

En primer lugar, para MithrilHall, así es como se llega a los eventos en MVC.

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

Hay otros eventos en treeview, puedes echar un vistazo por ti mismo. El argumento es el nombre de una función de JavaScript. Aquí hay una función javascript de ejemplo para este contenedor MVC para evitar que los niños se muevan fuera de sus padres, pero permitiéndoles moverse dentro del padre.

<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>

Tuve un campo parentID modelado en mi fuente de datos. Usted podría lograr esto de muchas maneras. El método dataItem devuelve un elemento treeview kendo, por lo que tiene todos sus campos modelados en él.

También comprenda que esta solución no cambia el widget para mostrar una X cuando se está moviendo a un lugar al que no puede acceder. Este es otro problema con otra solución.

Espero que esto ayude, ¡buena suerte!