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

Question

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

Hasta ahora he intentado tres métodos:

primero: la definición de los valores de retorno de verdadero o falso en la devolución de llamada drag_check dependiendo del tipo de nodo:

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

en segundo lugar: la unión al prepare_move.jstree evento y devolver los valores verdadero o falso dependiendo del tipo de nodo:

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

tercera: el uso de los tipos plugin y la definición de los niños válidos hay:

$("#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 puede señalarme un buen ejemplo?

La ayuda es muy apreciada.

Answer 1

En el (los) objetivo (s) necesitaría verificar si puede dejar caer un objeto allí. Parece que tiene algún mecanismo para oler el objeto como lo indicó 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 hilos. En el siguiente ejemplo, uso los nombres de clase de origen y destino para hacer mi propia "prueba de olor" única. No copie y pegue, o se confundirá. Debe usar su propio tipo de prueba para aceptar/rechazar un arrastre 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 }; } 
}, 

Answer 2

Para aquellos que buscan respuestas usando jstree v3. El plugin crrm ha sido eliminado, 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 a otros elementos secundarios. Puede haber una mejor manera de hacerlo, pero después de horas de poco progreso, esto es lo que funcionó para mí.

Creo que también necesita establecer la opción 'check_while_dragging' dnd en true para activar 'check_callback' mientras arrastra.

Aquí es mi jsTree inicialización:

$("#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"] 
     })