html – 允许拖放包含iframe的元素

2023年3月11日 122次阅读

我正试图进行非常基本的拖放操作.只需设置draggable =“true”就行了,但是当draggable元素包含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>

最佳答案 问题：

iframe包含与父窗口完全独立的窗口.当用户与iframe交互时,父窗口不再接收用户事件.浏览器假定您要与iframe的内容进行交互,并忽略可能位于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的内容进行交互,这在大多数情况下可能都是好的,在这种情况下你希望元素可以拖动.

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

点赞