CODEWITHSUNDEEP
javascriptdrag-and-dropdojo
GoinOff
GoinOff

Reputation: 1802

Drag N Drop event when drop completes

I have a project using dijit/Tree and dijit/tree/dndSource where the user can move tree items using drag and drop to make changes. I am using dojo release 1.10.4See jsfiddle here

Dojo Tree w/drag and drop

I need to have a notification when the drop is complete. It seems like onDndDrop would be the obvious place to trap this event but the documentation says that it's not a good idea to mess with this event:

dojo/dnd documentation

From the doc above...

Topic processors

Following topic listeners are defined: onDndSourceOver, onDndStart, onDndDrop, onDndCancel. These topics are published by the Manager. If you want to override topic listeners, please read Summary of topics.

Summary of topics

Warning: in most cases you want to use events. Topics are low-level constructs, which are used internally and generally should not be used for customization.

--------- end doc -----------

So, how can I get notification of when the drop completes so I can update some items on the server side using ajax?? onDndDrop event which is available using dijit/tree/dndSource object is what I need but the doc says one shouldn't mess with it. In my jsfiddle example above, I have it commented out //onDndDrop: treeDropEvt, on the tree object creation. If you add this to the tree creation, treeDropEvt get called when the user moves a tree item to another location in the tree but errors can be seen in the console and the move doesn't happen.

If I have to use onDndDrop event, how do I go about creating it so I receive no errors and it functions normally???

Upvotes: 1

Views: 107

Answers (2)

Stefano
Stefano

Reputation: 302

I do the thing you want to do in the pasteItem function of the TreeStoreModel. TreeStoreModel is the store of the Dojo Tree.

 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
});

Upvotes: 1

GoinOff
GoinOff

Reputation: 1802

After posting the problem above, I found a solution using topic. See my update jsfiddle here:

Monitor onDrop event using topic

add "dojo/topic" to the require line.

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

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

After making these changes to my project, everything works OK without errors and I can now make ajax call back to the server during a drop event. Note below that this event fires during the beginning of a drop and not when it's finished.

UPDATE

Using this method to fire treeDropEvt2 during a drop seems to be at the beginning of the drop instead of after the drop completes. Not sure why getting notification of a finished drop is such a pain?? very frustrating..

Upvotes: 0

Related Questions