允许拖放包含 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

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

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 进行交互，或者通过

postMessage

进行交互，并根据某些事件打开/关闭它。

Answer 2

这将通过在拖动或调整大小期间禁用交互，并在完成后重新启用它们来发挥作用。

<Mosaic
renderTile={(id, path) => (
  <MosaicWindow path={path} title={TITLE_MAP[id]}>
    {widgets[id]}
  </MosaicWindow>
)}
initialValue={{
  first: {
    first: "a",
    second: "c",
    direction: "column",
    splitPercentage: 33.03425610419985,
  },
  second: "b",
  direction: "row",
  splitPercentage: 50.40053404539386,
}}
onChange={() => {
  // make iframe has no interactions
  const iframes = document.querySelectorAll("iframe");
  iframes.forEach((iframe) => {
    iframe.style.pointerEvents = "none";
  });
}}
onRelease={() => {
  // restore iframe interactions
  const iframes = document.querySelectorAll("iframe");
  iframes.forEach((iframe) => {
    iframe.style.pointerEvents = "auto";
  });
}}
/>