Dojo Drag and drop: how to format a dropped item?

Question

I'm using Dojo trying to build an application with dojo's dnd. I've looked around for an answer to this problem but I'm just not sure how to accomplish this. I have a Source object in which there are a bunch of products formatted with html/css in a certain way. When I drag these objects to my Target object, the dropped item still looks the same as before. I want to format it differently after being dropped. Any ideas how to do this?

Answer 1

You do this via passing a creator function ref to your Source object.

Assuming you have dojo 1.3 and can use dojo.create.

In your JS:

function myCreator( item, hint ) {
   var myDiv = dojo.create( 'div', { innerHTML: item.name });

   if (hint == 'avatar') {
      // create your avatar if you want
      myDiv.innerHTML = 'I'm an avator of ' + item.name;
   }
   return {node: myDiv, data: item, type: item.type};
}

Then in your HTML (div or whatever):

<div dojoType="dojo.dnd.Source" creator="myCreator"></div>

If you want to create the Source item programmatically, just pass in the creator like so:

var dnd = new dojo.dnd.Source(someNode, { creator: myCreator });

I used item.name in my example above. This all depends on your item though so you will probably want to use a different field.

An excellent walk through of creating a dojo.dnd page is on the SitePen blog.