我们可以在 Dojo 中嵌套目标吗？答案

【问题标题】：Can we have nested targets in Dojo?我们可以在 Dojo 中嵌套目标吗？
【发布时间】：2011-01-05 22:52:15
【问题描述】：

我有两个 div 嵌套在一个父 div 下，我希望所有这些都成为 dojo.dnd 的源和目标。

我希望能够将节点添加到内容被删除的 div 中，并允许用户在 3 个 div 之间移动它。

这样的—— http://www.upscale.utoronto.ca/test/dojo/tests/dnd/test_nested_drop_targets.html

我猜这是在旧版本的 Dojo 中实现的，似乎不适用于 1.4

是否删除了对嵌套目标的支持？有什么方法可以实现吗？

【问题讨论】：

标签： dojo dojo-dnd

【解决方案1】：

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，并确保提供父代的dndSource 作为parentSource-Parameter：

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

工作示例：https://jsfiddle.net/teano87/s4pe2jjz/1/

【讨论】：

【解决方案2】：

我对这种情况使用了一种解决方法。我创建了另一个 DIV 元素，它位于嵌套目标的相同位置，宽度和高度相同，但 z-Index 值更高。然后新的 DIV 元素覆盖嵌套的目标。当用户试图放置在嵌套目标上时，他实际上会下降到上面的新 DIV 元素。只要新的 DIV 元素没有嵌套在父放置目标中，Dojo 的 dnd 操作就可以正常工作。我通常将新的 DIV 元素作为 body 元素的子元素。

您需要做的是在onDndStart 中创建新的DIV 并在onDndCancel 中销毁它，然后一切都会正常运行。

【讨论】：

【解决方案3】：

目前不支持嵌套源/目标。在大多数情况下，您可以通过使用独立的源/目标来解决此限制，但可以使用 CSS 随意定位它们。

【讨论】：

我正在尝试为 Dojo 小部件构建一个 DnD 可视化编辑器。因此人们可以直观地组成 UI。所以仅仅在视觉上放置它们是行不通的:(我希望能够在 div 之间拖动组件，将 div 移入和移出 div 等。我们可以通过任何方式实现这一点。我很乐意编写自定义 DnD 处理程序或使用DnD 主题。只希望找到正确的方向！
首先确定不能使用dojo.dnd.move & co。这些文件支持传统样式的拖动，并且它们不假定容器是列表。缺点是你必须自己处理“drop”，这并不难——你可以使用 dojo.dnd 代码作为备忘单。