dnd、特定のノードタイプへのドロップを制限する方法は？

Question

私は37種類のノードタイプを持っています。 ドラッグアンドドロップを実装しようとしています。 これは動作しますが、ドラッグできるタイプとドロップ可能なタイプを厳密に制限する必要があります。 残念なことに、ドキュメントに役立つ情報が見つかりませんでした（http://www.jstree.com/documentation）。

これまでのところ、私が試してみました三つの方法：

第一：第二

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

：prepare_move.jstreeに結合するノードの種類に応じて、drag_checkコールバックでtrueまたはfalseの戻り値を定義しますイベントおよびノー​​ドタイプに応じて、真または偽の値を返す：

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

第三：プラグインとそこに有効な子どもたちを定義するタイプを使用した：

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

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

大変助かります。

Answer 1

ターゲット上でオブジェクトをドロップできるかどうかを確認する必要があります。あなたが示したようにオブジェクトのにおいをするメカニズムがあるようです：

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

いいですね。この方法を使用して、マルチツリー操作を実行するときに、あるオブジェクトタイプを別のオブジェクトタイプと区別します。以下の例では、ソースとターゲットのクラス名を使用して、独自の「臭いテスト」を行います。コピー＆ペーストしないと混乱します。 1つのツリーから別のツリーへのドラッグ・アンド・ドロップを受け入れる/拒否するには、独自のタイプのテストを使用する必要があります。すべてのテストは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

jstree v3を使用して回答をお探しの方にお勧めします。 crrmプラグインが削除されましたが、代わりに 'check_callback'を使用します。

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

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

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