Question

I have a set of items that can be dragged / dropped using Dojo DND, that part has already been implemented and all is working well. The specific question I have is that I’d like to display very different data both in terms of content and visually while the item is being dragged than the initial view of the item, which is what is presently being displayed when the item is being dragged, how do i do this?

Answer 1

It seems that you may have already found the solution to your problem, but I thought I would just throw in my $.02.

What I did was to use a custom “drag avatar” for each drag handle (in the dojo vernacular, the “avatar” is what is displayed while the user is dragging). Here’s a direct snippet from the code:

for ( var i=0; i<this.cellsTotal; ++i ) {
    // Create the DND source
    var source = new dojo.dnd.Source(
        "drag-handle-container-" + i,
        {copyOnly: true, creator: createAvatar}
    );
    // Add stuff to it
    source.insertNodes(null, [{data: i, type: [this.dnd.classes.handle]}]);
}

createAvatar is a function callback previously defined something like this:

var createAvatar = function(item, mode) {
    var node       = dojo.doc.createElement("span");
    node.id        = dojo.dnd.getUniqueId();
    node.itemIndex = parseInt(item.data);
    dojo.addClass(node, "dojoDndItem");

    // Creating the drag avatar or the source node?
    if ( mode == "avatar" ) {
        // Create the DOM for the avatar (what is shown while dragging)
    } else {
        // Create the DOM for the source node (the handle for drag initiation)
    }

    return {node: node, data: item, type: [context.dnd.classes.avatar]};
};

Your method works obviously, but this method frees you from having to worry about toggling styles as Dojo will take care of all of the for you.

p.s.: I hate Dojo DND and its documentation. This took me waaay to long to figure out when I had to do it originally.