jstreeのノードに移動機能を実装したいと思います。実装する必要があるのは移動ですか、それともドラッグアンドドロップですか?また、コンテナをイベントにバインドするための作業コードとイベントコードがあると便利です。
3 に答える
移動ルールを適用する必要がない場合にのみ、dndプラグインを使用する必要があります(特定のノードを他のノードに移動できないようにするなど)。移動ルールを適用する必要がある場合は、crrmプラグインを追加できます。
この例については、dndpluignドキュメントのReorderonlyデモを参照してください。ドキュメントは非常に貧弱なので、ブラウザの開発者ツールを使用して、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
});
$("#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!
}
})
});
上記のアプローチは、最新バージョンのjstree(現在の3.3.7)では機能しません。
ボージンの答えの最初の行はまだ当てはまります。ルールを実装するには、プラグインを使用する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;
}