Question

NOTICE: THIS IS SOLVED, I WILL PUBLISH THE SOLUTION HERE ASAP.

Hey all,

Ok… I have a simple dojo page with the bare essentials. Three UL’s with some LI’s in them. The idea si to allow drag-n-drop among them but if any UL goes empty due to the last item being dragged out, I will put up a message to the user to gie them some instructions.

In order to do that, I wanted to extend the dojo.dnd.Source dijit and add some intelligence. It seemed easy enough. To keep things simple (I am loading Dojo from a CDN) I am simply declating my extension as opposed to doing full on module load. The declaration function is here…

function declare_mockupSmartDndUl(){
dojo.require("dojo.dnd.Source");
dojo.provide("mockup.SmartDndUl");
dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, {
    markupFactory: function(params, node){
        //params._skipStartup = true;
        return new mockup.SmartDndUl(node, params);
    },
    onDndDrop: function(source, nodes, copy){
        console.debug('onDndDrop!');    
        if(this == source){
            // reordering items
            console.debug('moving items from us');
            // DO SOMETHING HERE
        }else{
            // moving items to us
            console.debug('moving items to us');
            // DO SOMETHING HERE
        }

        console.debug('this = ' + this );
        console.debug('source = ' + source );   
        console.debug('nodes = ' + nodes);
        console.debug('copy = ' + copy);
        return dojo.dnd.Source.prototype.onDndDrop.call(this, source, nodes, copy);
    }   
});
}

I have a init function to use this to decorate the lists…

dojo.addOnLoad(function(){
declare_mockupSmartDndUl();
if(dojo.byId('list1')){
    //new mockup.SmartDndUl(dojo.byId('list1'));
    new dojo.dnd.Source(dojo.byId('list1'));
}

if(dojo.byId('list2')){
    new mockup.SmartDndUl(dojo.byId('list2'));
    //new dojo.dnd.Source(dojo.byId('list2'));
}

if(dojo.byId('list3')){
    new mockup.SmartDndUl(dojo.byId('list3'));
    //new dojo.dnd.Source(dojo.byId('list3'));
}
});

It is fine as far as it goes, you will notice I left “list1” as a standard dojo dnd source for testing.

The problem is this – list1 will happily accept items from lists 2 & 3 who will move or copy as apprriate. However lists 2 & 3 refuce to accept items from list1. It is as if the DND operation is being cancelled, but the debugger does show the dojo.dnd.Source.prototype.onDndDrop.call happening, and the paramaters do look ok to me.

Now, the documentation here is really weak, so the example I took some of this from may be way out of date (I am using 1.4).

Can anyone fill me in on what might be the issue with my extension dijit?

Thanks!

Answer 1

In the end, I hit the Dojo IRC (great folks!) and we ended up (so far) with this…

    function declare_mockupSmartDndUl(){
    dojo.require("dojo.dnd.Source");
    dojo.provide("mockup.SmartDndUl");
    dojo.declare("mockup.SmartDndUl", dojo.dnd.Source, {
        markupFactory: function(params, node){
            //params._skipStartup = true;
            return new mockup.SmartDndUl(node, params);
        },
        onDropExternal: function(source, nodes, copy){
            console.debug('onDropExternal called...');  

            // dojo.destroy(this.getAllNodes().query(".dndInstructions"));
            this.inherited(arguments);

            var x = source.getAllNodes().length;
            if( x == 0 ){
                newnode = document.createElement('li');
                newnode.innerHTML = "You can drag stuff here!";
                dojo.addClass(newnode,"dndInstructions");
                source.node.appendChild(newnode);
            }

            return true;
            // return dojo.dnd.Source.prototype.onDropExternal.call(this, source, nodes, copy);
        }   
    });
}

And you can see where I am heading, I put in a message when the source is empty (client specs, ug!) and I need to find a way to kill it when something gets dragged in (since it is not, by definition, empty any more ona incomming drag!). That part isnt workign so well.

Anyway, the magic was not to use the onDnd_____ functions, but the higher level one and then call this.inherited(arguments) to fire off the built in functionality.

Thanks!