dojo拖放(DnD)不适用于图像

问题描述:

我需要能够检测图标何时从其源容器外部放置到屏幕上的任何位置(不包括其他源容器,但这是未来要解决的问题)。我尝试的方法是制作一个扩展到整个屏幕dojo.dnd.Target的div。它可以工作,但只有大约一半的时间。dojo拖放(DnD)不适用于图像

我已经将问题隔离为下面的一个简洁示例。您可以通过尝试将图标从白框拖到灰色区域进行测试。我错过了什么吗?

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"]}; 
    }}); 
});

感谢, 罗伯特

我从尤金发现了问题道场利息清单上。 DnD Sources/Targets不支持div的嵌套。我需要诉诸绝对定位..