Можем ли мы иметь вложенные цели в Додзё?

Question

У меня есть два div, вложенных в родительский div, и я хочу, чтобы все они были исходными и целевыми для dojo.dnd.

Я хочу иметь возможность добавлять узлы в div, на который был удален контент, а также позволять пользователю перемещать их между 3 div.

Примерно так - http://www.upscale.utoronto.ca/test/dojo/tests/dnd/test_nested_drop_targets.html

Это, я думаю, реализовано в более старой версии Dojo и, похоже, не работает с 1.4

Убрана ли поддержка вложенных целей? Есть ли способ добиться этого?

Answer 1

Я использовал обходной путь для этого случая. Я создаю другой элемент DIV, который расположен в том же месте вложенной цели с той же шириной и высотой, но с более высоким значением z-Index. Затем новый элемент DIV покрывает вложенную цель. Когда пользователь пытается перейти на вложенную цель, он фактически переходит к указанному выше новому элементу DIV. Пока новый элемент DIV не вложен в родительский объект перетаскивания, операция djo в Dojo работает хорошо. Я обычно помещаю новый элемент DIV как дочерний элемент тела.

Что вам нужно сделать, это создать новый DIV в onDndStart и уничтожить его в onDndCancelтогда все должно работать хорошо.

Answer 2

Вложенные источники / цели в настоящее время не поддерживаются. В большинстве случаев вы можете обойти это ограничение, используя независимые источники / цели, но располагая их по своему желанию с помощью CSS.

Answer 3

Dojo версия 1.10 по-прежнему не поддерживает вложенный Dnd.

CSS-позиционирование и наложение div'ов у меня не сработало. Но я заметил, что перетаскивание элемента из dndContainer в родительский dndContainer не вызывает onMouseOverEvent для родительского объекта.

Если кто-то все еще использует dojo и имеет ту же проблему, вот мой подход для решения этой проблемы:

Объявите свой собственный dndSource, например, 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;
})

Используйте этот nestedDndSource для потомков вместо dojos и убедитесь, что в качестве parentSource-Parameter указан dndSource родителя:

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

Рабочий пример: https://jsfiddle.net/teano87/s4pe2jjz/1/