ドロップが完了したときにドラッグNドロップイベント

Question

dijit/Treeとdijit/tree/dndSourceを使用してプロジェクトを作成しました。ユーザーはドラッグアンドドロップを使用してツリーアイテムを移動して変更できます。私はここの道場リリース1.10.4Seeのjsfiddle私は、ドロップが完了したときに通知を持っている必要があり

Dojo Tree w/drag and drop

を使用しています。これは、このイベントをトラップには自明場所でしょうonDndDropのように思えるが、マニュアルには、それは、このイベントを台無しに良いアイデアではないことを言う：

dojo/dnd documentation

上記のdocから...

トピックプロセッサ

以下のトピックリスナーが定義されています。onDndSourceOver、onDndStart、onDndDrop、onDndCancelこれらのトピックは、Managerによって公開されます。トピックリスナーをオーバーライドする場合は、トピックの概要をご覧ください。

Summary of topics

警告：ほとんどの場合、あなたがイベントを使用します。トピックは、内部で使用され、一般的にはカスタマイズに使用すべきではない低レベルの構造です。だから、

---------エンドドキュメント-----------

、どのように私はドロップはので、私は上のいくつかの項目を更新することができます完了したときの通知を受け取ることができますサーバー側でajaxを使用して?? dijit/tree/dndSourceオブジェクトを使用して利用可能なイベントはonDndDropですが、私が必要としているのは医者です。上記の私のjsfiddleの例では、treeオブジェクト作成で//onDndDrop: treeDropEvt,をコメントアウトしました。これをツリーの作成に追加すると、ツリー項目をツリー内の別の場所に移動すると、treeDropEvtが呼び出されますが、コンソールにエラーが表示され、移動は行われません。

onDndDropイベントを使用する必要がある場合は、エラーを受け取らないようにするにはどうすれば作成できますか？通常は機能しますか？

Answer 1

上記の問題を投稿した後、topicを使用して解決策を見つけました。ここに私の更新jsfiddleを参照してください：

Monitor onDrop event using topic

はrequireラインに"dojo/topic"を追加します。

function treeDropEvt2(source, nodes, copy, target) { 
    console.log('treeDropEvt2'); 
    console.dir(source); 
    console.dir(nodes); 
    console.dir(copy); 
    console.dir(target); 
} 

topic.subscribe("/dnd/drop",treeDropEvt2);

私のプロジェクトにこれらの変更を行った後、すべてがエラーなしでOK動作し、私は今、ドロップイベント中にサーバーへのAJAX呼び出しを行うことができます。このイベントは、ドロップの開始時に開始され、終了した時点では発生しません。ドロップ時に treeDropEvt2を発射するために、このメソッドを使用して

は

UPDATE

代わりにドロップが完了した後のドロップの先頭にあると思われます。完成したドロップの通知を得るのがなぜこのような痛みですか？非常にイライラする..

Answer 2

TreeStoreModelのpasteItem機能でやりたいことをやっています。 TreeStoreModelは、Dojoツリーのストアです。

var memoryStore = new Memory({ 
      data: [{ 
       id: "root", 
       name: "ROOT", 
       loaded: true 
      }, ], 
      getChildren: function(object) { 
       return this.query({ 
        parent: object.id 
       }); 
      }, 
      clearOnClose:true 
     }); 

var myStore = new Observable(memoryStore); 

var myModel = new TreeStoreModel({ 
       store: myStore, 
       query: { 
        id: "root" 
       }, 
       labelAttr: "label", 
       pasteItem: function(child, oldParent, newParent, copy, insertIndex) { 
        // SEND NOTIFICATION, DO QUERIES 
       } 
      }); 

var tree = new Tree({ 
      model: myModel, 
      dndController: dndSource 
});