Dojo DnD: how to access newly copied node on onDndDrop event?

Question

Hi.

I am working on code like the following.

01: var c1 = new dojo.dnd.Source('container1', {copyOnly:true}); // container1 is a div
02: var c2 = new dojo.dnd.Source('container2');                  // container2 is a div
03: var list = [];
04: for (var i = 0; i < 3; i++) { list.push( dojo.create('div') ); }
05: c1.insertNodes(false, list);
06: 
07: function checkDndCopy(nodes, target){
08:  dojo.forEach(nodes, function(node){ alert(node.id); } );
09: }
10: dojo.subscribe("/dnd/drop", function(){
11:   var mgr = dojo.dnd.manager();
12:   checkDndCopy(mgr.nodes, mgr.target);
13: });

The nodes inserted to the c1 at line 05 have id of "dojoUnique1, donoUnique2, dojoUnique3". On a event of drag and drop a node from c1 to c2, a onDndDrop event is fired and the subscribe method defined in line10-13 is invoked.

I expected that newly copied node appears in the nodes (for example) at line 08. But this is not true. When dojoUnique1 is target of drag and drop, nodes at line 08 contains only dojoUnique1.

I want to modify some attributes of newly copied nodes on the event of onDndDrop. Please let me know how such a thing is realized.

Answer 1

I'm not sure, if it is the only (and best) way, but you may write your own node creator to override dropped node and avatar creation. Example below extends your code and makes dropped nodes red:

    var c1 = new dojo.dnd.Source('container1', {copyOnly:true }); // container1 is a div
    var c2 = new dojo.dnd.Source('container2', { creator: nodeCreator }  );   // container2 is a div

    function nodeCreator(item, hint) {
      var node = dojo.create("div", { innerHTML: item }); 
      if (hint != "avatar") {
        dojo.style(node, 'color', 'red');
      }
      return { node: node, data: item };
    }

You can find more information about writing own creators here and in google

Answer 2

Based on the way of using custom creator, I found following.

var d;
d = dojo.doc.createElement('div');
var c01 = new dojo.dnd.Source(d, { 'copyOnly': true, 'accept': [], 'creator': myCreator});

var arr = [];
for(i=0; i<3; i++){ 
  d = dojo.create('div'); // dnd items
  // define contents and properties of d
  arr.push( d );
}
c01.insertNodes(false, divArr);

d = dojo.doc.createElement('div');
var c02 = new dojo.dnd.Source(d, { 'creator': myCreator});

function myCreator(item, hint){
  var node = dojo.doc.createElement('div');
  node.id = dojo.dnd.getUniqueId();
  var mgr = dojo.dnd.manager();
  // from dojo.dnd.manager(), it is possible to find which one to create 
  // the follwoing condition is just a sample
  if(hint != 'avatar' && 
     mgr.source && mgr.target // these are null when creating newly inserted one
     mgr.source.node && mgr.target.node // by inspecting these nodes, one can know
                                        // whether the item is newly copied one
  ){
    dojo.style(node, 'color', 'red');
    // one can get mouse position from mgr and set the node position
  }
  var copyItem = createCopyItem( item );
  dojo.place(copyItem, node, 'last');

  return { node: node, data: copyItem, type:[ /* what you want */ ] };
}

Function createCopyItem() is out of scope. It is necessary to copy item and modify the new object because item cannot be placed both under its original parentNode and under node created in myCreator().

Answer 3

thanks for sharing.