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

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 位置。