允许拖放包含 iframe 的元素

Question

我正在尝试进行非常基本的拖放操作。只需设置draggable = "true" 就可以正常工作，但当可拖动元素包含 iframe 时似乎不起作用。

我到处搜索并遇到了许多与 iframe 相关的复杂问题，但没有一个是关于我的具体问题。

如您所见，只有 iframe 未覆盖的区域是可拖动的，而我想拖动整个容器。

div {
    width: 300px;
    height: 100px;
    background: #A1DB6A;
}
iframe {
    border: 0;
    height: 80px;
    width: 100%;
    background: #ddd;
}

<div draggable="true">
    <iframe src=""></iframe>
</div>
<br/>
<span>Only the green handle is draggable, but I want the whole container to be.</span>

Answer 1

问题：

iframe 包含一个完全独立于父窗口的窗口。当用户与iframe 交互时，父窗口不再接收用户事件。浏览器假定您想要与iframe 的内容进行交互，并忽略可能位于iframe 的父级上的任何draggable 属性。

解决方法：

您可以在iframe 上放置一个不可见元素，以防止用户与下面的iframe 进行交互。这是一个使用绝对定位伪元素的示例。

示例 CSS (JSFiddle)：

div {
    width: 300px;
    height: 100px;
    background: #A1DB6A;
    position: relative;/*parent must have positioning*/
}
iframe {
    border: 0;
    height: 80px;
    width: 100%;
    background: #ddd;
}
/*Cover up the entire element (could be limited to just covering the iframe element)*/
div:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

这种变通方法带来了明显的副作用，即阻止用户与iframe 的内容进行交互，这在您希望元素为draggable 的大多数情况下可能没问题。

如果需要与iframe 交互，您可以在可拖动和不可拖动之间进行切换，并且仅在可拖动时应用此 CSS。否则，您将需要使用 JavaScript 与 iframe 交互，如果它们满足 contentWindow，则通过 Same-Origin Policy 或通过 postMessage，并根据某些事件打开/关闭它。