0

我有一个 iframe 加载到父页面中。页面和 iframe 托管在不同的域上。我的 iframe 骨架看起来像这样：http ://cl.ly/image/44090J0H2S3Y

我正在尝试将文件从外部拖放到 iframe 中。由于安全原因，浏览器不会将拖放事件转发到从不同域加载的 iframe。目前，我正在通过在整个 iframe 上放置一个透明 div 并将 javascript“drop”事件捕获到透明 div 上，然后使用 iframe.postMessage 向 iframe 发送消息来解决这个问题。在 iframe 方面，我有一些 javascript 监听消息并采取适当的措施将其上传到我的服务器。

这一切都很好。我要实现的是以下内容：

  1. 用户开始从主机页面拖动图像
  2. 一旦她/他到达“蓝色”区域，相应的蓝色项目应突出显示
  3. 当她/他放手时，文件应该被上传

我可以在每个蓝色项目上放置一个单独的透明 div，但问题是滚动条等可能有任意数量的蓝色项目。我不确定如何实现这一点。谢谢你的帮助！

4

2 回答 2

1

你的拖放是如何实现的？HTML5 拖放或基于 DOM？根据描述，我怀疑您正在使用基于 DOM 的拖放操作

由于浏览器限制，当 iframe 托管在另一个域上时，无法读取/写入 iframe 的 DOM。它可能不会给你想要的效果，但 HTML5 拖放对于 iframe 和窗口之间的拖动要好得多。但同样，您不能从源文档代码向放置目标添加样式。

尝试这个：

  1. 导航至：http ://decafbad.com/2009/07/drag-and-drop/api-demos.html
  2. 打开一个新窗口并导航到： http: //funwithbonus.com/wp-content/uploads/stack-drawers.jpg
  3. 将图像拖动到第 4 个示例“使用拖动反馈图像返回 TOC”

如果您有权访问目标文档的域，则可以对处理突出显示的“蓝色项目”实施拖放区

于 2013-08-21T19:43:10.183 回答
0

我将通过以下方法创建透明 div：

var blueItemContainer = document.getElementById('blueItemContainer');
var blueItems = blueItemContainer.childNodes;

blueItemContainer.style.position = "relative";

for(var i = 0; i < blueItems.length; i++)
{
    var transparentDiv = document.createElement('div');
    transparentDiv.style.height = blueItems[i].style.height;
    transparentDiv.style.width = blueItems[i].style.width;
    transparentDiv.style.position = "absolute";
    transparentDiv.style.left = blueItems[i].offsetLeft;
    transparentDiv.style.top = blueItems[i].offsetTop;
    blueItemContainer.appendChild(transparentDiv);
}
于 2013-08-21T20:22:01.257 回答