jstreeの移動、ドラッグアンドドロップ

Question

jstreeのノードの移動機能を実装したいと思います。それは実装されなければならない動きかドラッグ・アンド・ドロップですか？ Alosでは、コンテナをイベントとイベントコードにバインドする作業コードを用意するのが良いでしょう。

Answer 1

移動ルールを適用する必要がない場合（特定のノードを他のノードに移動させないなど）には、dndプラグインを使用する必要があります。 移動ルールを適用する必要がある場合は、 crrmプラグイン。

この例については、dnd pluignのドキュメントのReorder only demoを参照してください。ドキュメントは非常に貧弱ですので、ブラウザの開発ツールを使用して、check_moveコールバックのパラメータのプロパティを確認する必要があります。ドキュメントの例では、m.oはドラッグされたノードを表し、m.rは宛先ノードを表します。

はまた、おそらくノードが移動したときに通知する必要があるので、あなたは、ツリーの初期化時にmove_node.jstreeイベントにバインドします：

$("#treeHost").jstree({ 
    ... 
    }).bind("move_node.jstree", function (e, data) { 
     // data.rslt.o is a list of objects that were moved 
     // Inspect data using your fav dev tools to see what the properties are 
     }); 
    }) 

Answer 2

$("#demo1").jstree({ 
.... 
.bind("move_node.jstree", function (e, data) { 

    /* 
    requires crrm plugin 

    .o - the node being moved 
    .r - the reference node in the move 
    .ot - the origin tree instance 
    .rt - the reference tree instance 
    .p - the position to move to (may be a string - "last", "first", etc) 
    .cp - the calculated position to move to (always a number) 
    .np - the new parent 
    .oc - the original node (if there was a copy) 
    .cy - boolen indicating if the move was a copy 
    .cr - same as np, but if a root node is created this is -1 
    .op - the former parent 
    .or - the node that was previously in the position of the moved node */ 

    var nodeType = $(data.rslt.o).attr("rel"); 
    var parentType = $(data.rslt.np).attr("rel"); 

    if (nodeType && parentType) { 
     // TODO! 
    } 
}) 
});