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

jstree refresh

Question

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

Hasta ahora he intentado tres métodos:

Primero: definir 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 () {

segundo: vincularse al 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: usando el plugin de tipos y definiendo hijos 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 dejar la mayoría de los nodos en casi cualquier lugar ¿Cómo debe hacerse esto? ¿O puedes darme un buen ejemplo?

La ayuda es muy apreciada.

Answer 1

En el (los) objetivo (s), deberá comprobar si tiene permiso para colocar 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. Use esa técnica para discriminar un tipo de objeto de otro al realizar una operación de multitree. En el siguiente ejemplo, uso los nombres de clase de origen y destino para realizar mi propia "prueba de olfato". No copie y pegue o se confundirá. Debe utilizar su propio tipo de prueba para aceptar / rechazar un 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 }; }
 },

Answer 2

Para aquellos de ustedes que buscan respuestas usando jstree v3. El complemento 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 me funcionó.

Creo que también es necesario establecer la opción dnd ''check_while_dragging'' en true para activar ''check_callback'' mientras se 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"]
        })