CODEWITHSUNDEEP
javascriptdojodrag-and-drop
Calvin
Calvin

Reputation: 8775

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

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?

Upvotes: 2

Views: 3136

Answers (2)

Durgarao
Durgarao

Reputation: 1

topic.subscribe("/dnd/drop", function(source, nodes, copy, target) {

    target.forInSelectedItems(function(item, id) {
        //alert(document.getElementById(id));
        if (document.getElementById(id).innerHTML == "something from your source") {
            //create what you want, and add it to id
        }
    }
}

Upvotes: 0

seth
seth

Reputation: 37297

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.

Upvotes: 2

Related Questions