Can we have nested targets in Dojo?

I have two divs nested under a parent div and I want all these to be source as well as targets for dojo.dnd.

I want to be able to add nodes to the div 开发者_运维技巧over which the content was dropped and also allow the user to move this in between the 3 divs.

Something like this - http://www.upscale.utoronto.ca/test/dojo/tests/dnd/test_nested_drop_targets.html

This is I gues implemented in older version of Dojo and doesn' seem to work with 1.4

Is the support for nested targets removed? Is there any way to achieve this?

Nested sources/targets are not supported currently. In most cases you can work around this restriction by using independent sources/targets, yet positioning them as you wish with CSS.

I used a workaround for this case. I create another DIV element which positioned at the same place of the nested target with same width and height but with higher z-Index value. Then the new DIV element covers the nested target. When user is trying to drop on the nested target, he actually drops to the above new DIV element. As long as the new DIV element is not nested in the parent drop target, Dojo's dnd operation works well. I usually put the new DIV element as a child of the body element.

What you need to do is to create the new DIV in onDndStart and destroy it in onDndCancel, then everything should work well.

Dojo version 1.10 still does not support nested Dnd.

CSS positioning and overlay div's didn't work for me. But I noticed that dragging an element out of a dndContainer into a parent dndContainer doesn't trigger onMouseOverEvent for the parent.

In case someone is still using dojo and has the same problem, here is my approach to solve this:

Declare your own dndSource e.g. nestedDndSource.js

define([
    "dojo/_base/declare",
    "dojo/dnd/Source",
    "dojo/dnd/Manager"
], function(declare,dndSource, Manager){

    var Source = declare("dojo.dnd.Source", dndSource, {
        parentSource: null,
        onOutEvent: function(){
            if(this.parentSource != undefined)
                Manager.manager().overSource(this.parentSource)
            Source.superclass.onOutEvent.call(this);
        }
    });

    return Source;
})

Use that nestedDndSource for the children instead of dojos and make sure to provide the dndSource of the parent as parentSource-Parameter:

var parentDndSource = new dojoDndSource(parentNode, {..});
var childDnDSource = new nestedDndSource(childNode,{
                        parentSource: parentDndSource,
                        onDropExternal: ...
                     });

Working example: https://jsfiddle.net/teano87/s4pe2jjz/1/