Question

我在Google Chrome中遇到了拖放问题：

foo.html ：

<iframe style="position:absolute;left:300px" src="bar.html"></iframe>

bar.html ：

<div draggable="true" id="bar">Drag me!</div>
<script>
    document.getElementById("bar").addEventListener("dragend", function(e) {
        console.log(e.view === window); // false
        console.log(e.view === window.parent); // true
    });
</script>

为什么e相对于父窗口而不是当前窗口（即当前帧的window属性）？我已确认dragstart和dragover都会收到相对于当前框架view属性的参数。

Here是一个可以在safari或chrome上重现问题的jsfiddle。

编辑：澄清 - 在我的测试中，我不是在框架之外结束拖动。

Answer 1

父窗口存储在e.view中的原因是因为dragend发生在iframe之外。如果您想知道iframe相对于窗口的位置，那么只要两个文件位于同一服务器上就可以这样做，因此没有保护父窗口的跨源问题。如果是这样，那么您可以执行以下操作：

// get the iframes from the parent
var iframes = window.parent.document.getElementsByTagName('iframe');
var iframe;

// search through the iframes[] array and match your name 
for (var i = 0; i < iframes.length; i++) {
    if (iframes[i].src == 'bar.html') { // note, you may have to parse this or add your full pathname
        iframe = iframes[i];
        break;
    }
}
// get the boundaries of the selected iframe
var rect = iframes[i].getBoundingClientRect();

在此之后，当您处理dragend事件时，请执行以下操作：

if(e.view == window) {
    xoff = e.clientX;
    yoff = e.clientY;
}
else {
    xoff = e.clientX - rect.left;
    yoff = e.clientY - rect.top;
}

这将为您提供相对于iframe的x和y位置。

Answer 2

如果在iframe之外触发'ondragend'事件，则事件会冒泡到包含iframe的活动文档....

由于安全原因，

浏览器会阻止尝试访问具有不同来源的帧的脚本....

有关此thread

中安全性的一些有用信息

如果您正在处理后端，并尝试将clientX，clientY值发布到后端，当ondragstart触发＆amp;渲染你想要的页面然后在dragend射击时获得相对位置......

如何获得相对于当前帧的结束拖动位置？

2 个答案: