dojo drag and drop (DnD) not working for image

Question

I need to be able to detect when an icon is dropped outside its source container to anywhere on the screen (excluding other source containers, but that's a future problem to solve). The approach I'm attempting is to make a div that expands to the entire screen a dojo.dnd.Target. It works but only about 1/2 of the time.

I've isolated the problem into a compact example below. You can test by trying to drag the icon off the white box to the gray area. Am I missing something?

html:

<div id="canvas" style="width: 100%; height: 100%; background-color: gray">
    <div id="box" style="width: 200px; height: 175px; background-color: white;"></div>
</div>

js:

dojo.addOnLoad(function(){
    var src = new dojo.dnd.Source("box", {creator: function(item, avatar) {
        var node = (avatar) ? dojo.create("span",{innerHTML:"avatar"}) : item.icon;
        return {node:node, data:item, type:["custom"]};
    }});

    src.insertNodes(false, [{icon:dojo.create("img", {src:"action.png"})}]);

    new dojo.dnd.Target("canvas",{accept:["custom"], creator:function(item){
        console.debug("Drop to canvas successful");
        return {node:dojo.create("span"), data:item, type:["custom"]};
    }});
});

Thanks, Robert

Answer 1

I found out the problem from Eugene on the dojo-interest list. Nesting of divs is not supported for DnD Sources/Targets. I'll need to resort to absolute positioning..