web-dev-qa-db-ja.com

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

Jstreeのノードに移動機能を実装したい。実装する必要があるのは移動ですか、それともドラッグアンドドロップですか？また、コンテナをイベントにバインドするための作業コードとイベントコードがあると便利です。

jstree
13
Len Smith

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
        });
    })
19
Bojin Li
$("#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!
    }
})
});
12
Rikin Patel

上記のアプローチは、最新バージョンのjstree（現在の3.3.7）では機能しません。

Bojinの答え の最初の行はまだ当てはまります。ルールを実装するには、 core.check_callback または、場合によってはtypesプラグインを使用できます。 crrmプラグインはもう存在しません。 move_node.jstreeにバインドして、移動（ドロップ）の完了時に何らかのアクションを実行します。デフォルトでは、dndプラグインでは、ノードの移動に加えて、並べ替え（2つのノード間のドロップ）とコピー（Ctrl +ドラッグ）が可能です。以下のコードスニペットは、これらの追加の動作を無効にする方法を示しています。

$('#treeElement').jstree({
    'core': {
        'check_callback': CheckOperation,
        ...
    },
    'plugins': ['dnd']
})
.bind("move_node.jstree", function(e, data) {
    //data.node was dragged and dropped on data.parent
});

function CheckOperation(operation, node, parent, position, more) {
    if (operation == "move_node") {
        if (more && more.dnd && more.pos !== "i") { // disallow re-ordering
            return false;
        }
        ... more rules if needed ...
        else {
            return true;
        }
    }
    else if (operation == "copy_node") {
        return false;
    }
    return true;
}
4
fhl