dnd, ¿cómo restringir la caída a ciertos tipos de nodos?

Tengo 37 tipos de nodos diferentes. Estoy tratando de implementar arrastrar y soltar. Esto funciona, pero necesito restringir exactamente qué tipos se pueden arrastrar y dónde se pueden soltar. Desafortunadamente, no puedo encontrar ninguna información útil en los documentos (http://www.jstree.com/documentation).

Hasta ahora he probado tres métodos:

primero: definir valores de retorno de verdadero o falso en la devolución de llamada drag_check según el tipo de nodo:

$("#demo1").jstree({
    "dnd" : {
        "drag_check" : function () {

segundo: enlazar con el evento prepare_move.jstree y devolver valores verdaderos o falsos según el tipo de nodo:

.bind("prepare_move.jstree", function (e, data) {
   if (data.rslt.o.attr("typ") === "tpop") {

tercero: usar el complemento de tipos y definir niños válidos allí:

$("#tree").jstree( {
    "types": {
        "type_attr": "typ",
        "valid_children": ["ap_ordner_pop", "ap_ordner_apziel", "ap_ordner_erfkrit", "ap_ordner_apber", "ap_ordner_ber", "ap_ordner_beob", "iballg", "ap_ordner_ibb", "ap_ordner_ibartenassoz"],
        "types": {
        "ap_ordner_pop": {
            "valid_children": "pop"
        },
        "pop": {
            "valid_children": ["pop_ordner_tpop", "pop_ordner_popber", "pop_ordner_massnber"],
            "new_node": "neue Population"
        },
        "pop_ordner_tpop": {
            "valid_children": "tpop"
        }

Pero todavía puedo colocar la mayoría de los nodos en casi cualquier lugar. ¿Cómo se debe hacer esto? ¿O puedes señalarme un buen ejemplo?

La ayuda es muy apreciada.

preguntado el 12 de junio de 12 a las 16:06

2 Respuestas

Para aquellos de ustedes que buscan respuestas usando jstree v3. El complemento crrm se eliminó y, en su lugar, querrá usar 'check_callback'.

En mi caso, todo lo que quería hacer era evitar que los elementos secundarios se arrastraran dentro otros artículos para niños. Puede haber una mejor manera de hacer esto, pero después de horas de poco progreso, esto es lo que funcionó para mí.

Creo que también debe configurar la opción dnd 'check_while_dragging' en verdadero para activar 'check_callback' mientras arrastra.

Aquí está mi inicialización jsTree:

$("#jsTree").jstree({
            'core': {
                'data': window.treeData,
                'themes': {
                    'icons': false
                },
                'check_callback': function(operation, node, node_parent, node_position, more) {
                    // operation can be 'create_node', 'rename_node', 'delete_node', 'move_node' or 'copy_node'
                    // in case of 'rename_node' node_position is filled with the new node name

                    if (operation === "move_node") {
                        return node_parent.original.type === "Parent"; //only allow dropping inside nodes of type 'Parent'
                    }
                    return true;  //allow all other operations
                }
            },
            "state": { "key": "<%=Request.QueryString["type"]%>_infotree" },
            "dnd": {
                check_while_dragging: true
            },
            "plugins": ["state", "dnd", "types"]
        })

contestado el 06 de mayo de 14 a las 06:05

Esto no funcionó como esperaba. Cuando devuelvo falso desde la devolución de llamada, evita que el elemento de origen se agregue al elemento principal. Sin embargo, esperaba ver una "X roja" mientras pasaba el mouse sobre el nodo de destino para indicar que no estaba permitido. En cambio, lo que sucede es que veo una marca de verificación verde que hace que parezca que puedo arrastrar y soltar el objetivo y, cuando lo hago, no sucede nada. Como no quería dedicar demasiado tiempo a ello, simplemente agregué una alerta que dice "No se permite arrastrar y soltar en este nodo" cuando ocurre el evento. - izmaxx

Gracias por la información sobre la versión 3. Soy nuevo en esto y he tenido dificultades para averiguar qué hay disponible en las diferentes versiones. - Sean Lynch

@izmaxx, noté que si intenta arrastrar el nodo antes del primer elemento de la lista, no sucede nada. Pero si arrastra un elemento después del primer elemento de la lista, el elemento se mueve. Para evitar este error, uso el complemento de clasificación y ordeno por una propiedad de "orden", y luego proceso la lista recién ordenada en mi servidor y envío la nueva lista ordenada de vuelta a la interfaz de usuario. Cuando se envía al servidor, el elemento se inserta al principio de la lista SI el elemento se arrastró a un padre. Luego envío el nuevo pedido de vuelta al front-end y reescribo el árbol: Pablo Preibisch

@izmaxx o @tonic, ¿alguna vez descubriste cómo hacer que la "X roja" cambie a "verde ✓" usando check_callback() o algún otro medio? - daniel.caspers

@ daniel.caspers establecer check_while_dragging en verdadero me dio a la cruz roja. - Kaustubh

En el (los) objetivo (s), deberá verificar si puede dejar caer un objeto allí. Parece que tienes algún mecanismo para oler el objeto como indicaste con:

 if (data.rslt.o.attr("typ") === "tpop")

Eso es bueno. Utilice esa técnica para discriminar un tipo de objeto de otro al realizar una operación de varios árboles. En el siguiente ejemplo, utilizo nombres de clase de origen y destino para hacer mi propia "prueba de olor". No copies y pegues o te confundirás. Debe usar su propio tipo de prueba para aceptar/rechazar arrastrar y soltar de un árbol a otro. Todas mis pruebas se realizan en la función crrm check_move.

.jstree({
 "crrm" : {
    input_width_limit : 200,
    move : {
        always_copy     : "multitree", // false, true or "multitree"
        open_onmove     : false,
        default_position: "last",
        check_move      : function (m) { 
                            if(!m.np.hasClass("someClassInTarget")) return false;
                            if(!m.o.hasClass("someClassInSource")) return false;
                            return true;
                          }
    }
 },
 "dnd" : {
    copy_modifier   : $.noop,
    drop_target     : ".someWrapperClassInSource",
    drop_check      : function (data) { return true; },
    drop_finish     : function (data) {
                            $.jstree._reference(this.get_container()).remove($(data.o));
                      },
    drag_target     : ".someClassInSource",
    drag_finish     : function (data) {;},
    drag_check      : function (data) { return { after : false, before : false, inside : true }; }
 },

Respondido el 13 de junio de 12 a las 11:06

sí, ¡check_move de crrm funciona! Muchas gracias por tu ayuda, MMeah. Desearía que la documentación fuera más clara en este punto: Alex

sí, el doc no es tan claro. Tienes que mirar el código fuente para encontrar esta información. Busque la fuente para: "check_move" - MMeah

He experimentado lo mismo con los documentos de jsTree: no son tan claros como podrían ser. +1 para check_move - escupir

He estado usando jsTree v3 durante un par de semanas y no me gusta la documentación. Huelo un Internet Explorer. - Código Monkey

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.