问题：

Question

我试图进行非常基本的拖放操作。只需设置draggable = "true"即可正常工作，但当draggable元素包含iframe时，它似乎无法正常工作。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

问题：

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

解决方法：

您可以在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，则根据某些情况开启/关闭事件

允许拖放包含iframe的元素

1 个答案:

问题：

解决方法：

示例CSS（JSFiddle）：