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.