3

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?

Rohit
  • 53
  • 1
  • 7

3 Answers3

1

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.

Eugene Lazutkin
  • 43,776
  • 8
  • 49
  • 56
  • I am trying to build a DnD visual editor for Dojo widgets. So people can visually compose the UI. So just placing them visually won't work :( I want to be able to drag components between divs, move divs in and out of divs, etc. Any way we can achieve this. I am comfortable writing a custom DnD handler or using the DnD topics. Just want the right direction to look in! – Rohit Feb 11 '10 at 06:55
  • First make sure that you cannot use dojo.dnd.move & co. These files support a traditional style drag, and they do not assume that containers are lists. The downside is you'll have to process "drop" yourself, which is not that difficult --- you can use dojo.dnd code as a cheatsheet. – Eugene Lazutkin Feb 15 '10 at 20:42
1

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.

Fu Cheng
  • 3,385
  • 1
  • 21
  • 24
0

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/

teano
  • 505
  • 5
  • 12