Chrome 跨框架拖放：为什么它可以跨浏览器工作？答案

【问题标题】：Chrome Cross frame Drag and Drop: why does it work cross browsers?Chrome 跨框架拖放：为什么它可以跨浏览器工作？
【发布时间】：2026-02-06 01:50:01
【问题描述】：

在我的场景中，HTML5 页面（父）包含来自不同域的 iframe（子）。理想情况下，我希望能够将元素从父元素拖到子元素中。

这在 FireFox 中有效，但在 Chrome 中由于安全限制而失败 (afaik https://bugs.chromium.org/p/chromium/issues/detail?id=251718)。

但是，如果我在不同的浏览器实例中打开相同的 HTML5 页面，从那里拖动到另一个实例的 iframe 中，那么这是允许的。

安全限制的原因是用户看不到目标 iframe 的 URL，但在这两种情况下都是如此。为什么一个有效而另一个无效？

上样 http://carsten-leue.de/iframe/cross-domain/

尝试将drag me 拖入drop here。这在 Chrome 中是不可能的。在另一个浏览器窗口中打开相同的 URL，然后将 drag me 从新窗口拖到旧窗口的 drop here 中。这行得通。

【问题讨论】：

标签： html google-chrome security drag-and-drop

【解决方案1】：

我希望你使用这个 API，因为它允许拖动！（不像您的来源显示的图像类型！）

<!-- HTML -->
<body>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</body>

// JavaScript
document.getElementById('elementId').draggable();
// Or if you have a class name
document.getElementsByClassName('elementClass').draggable();

【讨论】：

【解决方案2】：

使用 HTML5 拖放 API 创建跨框架和跨浏览器实现。 http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface

编辑 - 之前的链接无效（dockPHP 更名为 StackHive），因此写了一篇更完整的文章，可以帮助创建史诗般的拖放界面。

来源：Drag-Drop elements between parent frame and child iframe

【讨论】：