24

37種類のノードタイプがあります。ドラッグアンドドロップを実装しようとしています。これは機能しますが、ドラッグできるタイプとドロップできる場所を正確に制限する必要があります。残念ながら、ドキュメント（http://www.jstree.com/documentation）で有用な情報を見つけることができません。

これまでに3つの方法を試しました。

最初：ノードタイプに応じてdrag_checkコールバックでtrueまたはfalseの戻り値を定義します。

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

2番目：prepare_move.jstreeイベントにバインドし、ノードタイプに応じてtrueまたはfalseの値を返します。

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

3番目：typesプラグインを使用し、そこで有効な子を定義します。

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

しかし、ほとんどのノードをほぼどこにでもドロップできます。これはどのように行う必要がありますか？それとも良い例を教えていただけますか？

ヘルプは大歓迎です。

4

2 に答える 2

54

jstreev3を使用して答えを探している人のために。crrmプラグインは削除されました。代わりに、「check_callback」を使用する必要があります。

私の場合、私がやりたかったのは、子アイテムが他の子アイテムにドラッグされないようにすることだけでした。これを行うためのより良い方法があるかもしれませんが、少しの進歩の数時間後、これは私のために働いたものです。

ドラッグ中に「check_callback」をトリガーするには、「check_while_dragging」dndオプションもtrueに設定する必要があると思います。

これが私の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"]
        })
于 2014-05-06T05:14:06.640 に答える
12

ターゲット上で、オブジェクトをそこにドロップできるかどうかを確認する必要があります。あなたが示したように、あなたはオブジェクトの匂いを嗅ぐための何らかのメカニズムを持っているようです：

 if (data.rslt.o.attr("typ") === "tpop")

それは良い。マルチツリー操作を実行するときに、その手法を使用して、あるオブジェクトタイプを別のオブジェクトタイプから区別します。以下の例では、ソースとターゲットのクラス名を使用して、独自の「匂いテスト」を実行しています。コピーして貼り付けないでください。混乱する可能性があります。あるツリーから別のツリーへのドラッグアンドドロップを受け入れる/拒否するには、独自のタイプのテストを使用する必要があります。私のテストはすべて、crrmcheck_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 }; }
 },
于 2012-06-13T10:53:44.620 に答える