Html 允许拖放包含iframe的元素

我正在尝试一个非常基本的拖放操作。只要设置

draggable=“true”

，它就可以正常工作，但当draggable元素包含iframe时，它似乎不起作用

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

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

div{
宽度：300px；
高度：100px；
背景：#A1DB6A；
}
iframe{
边界：0；
高度：80px；
宽度：100%；
背景：ddd；
}

只有绿色手柄可以拖动，但我希望整个容器都可以拖动。

问题：

iframe

包含一个与父窗口完全分离的窗口。当用户与

iframe

交互时，父窗口不再接收用户事件。浏览器假定您希望与

iframe

的内容交互，并忽略可能位于

iframe

父级上的任何

draggable

属性

解决办法： 您可以在

iframe

上放置一个不可见元素，以防止用户与下面的

iframe

交互。下面是一个使用绝对定位伪元素的示例

示例CSS（）： 此解决方法带来了明显的副作用，即阻止用户与

iframe

的内容交互，这在您希望元素可拖动的大多数情况下可能是正常的

---

如果需要与

iframe

交互，可以在可拖动和不可拖动之间进行切换，并且仅在可拖动时应用此CSS。否则，您需要使用JavaScript与

iframe

进行交互，如果满足，可以通过

contentWindow

，也可以通过，并根据特定事件将其打开/关闭。

也许您可以使用jquerydraggable@user3087839 : ... :)令人惊叹的。我不再真的需要解决这个问题，但仍然非常草率。我尝试使用

指针事件：none

来防止浏览器捕捉iframe中的指针事件，但它似乎忽略了它（至少在最新的Chrome上）。在顶部添加一个不可见项既聪明又优雅，使用

:after

这样做甚至更好，因为我个人从未发现它的用法。非常感谢您，您将获得赏金，但显然我需要等待22小时才能获得赏金。@Alexander这是一个很好的解决方案。但是在我的例子中，iframe中有一个

onclick

属性，它不再被触发。你知道为什么吗？@SouvikRay如果

iframe

具有

onclick

属性，并且它被包装器

div

的

覆盖：在
内容之后，你将无法点击
iframe
，只能点击包装器
div
。
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;
}