使用 jQuery UI 跨帧拖放答案

【问题标题】：Drag & drop across frames with jQuery UI使用 jQuery UI 跨帧拖放
【发布时间】：2010-06-19 13:45:45
【问题描述】：

我想这样做：

有没有办法使用 jQuery UI draggable & droppable 来实现这一点？或者以其他方式以跨浏览器的方式执行此操作，可能使用另一个 JS 库？

【问题讨论】：

HTML5 中将提供此功能：w3.org/TR/html5/comms.html（参见：跨文档消息传递）在 HTML5 标准化之前强制执行 HTML5 支持。
@JimSchubert 为什么同一个 Web 应用程序的两个不同 iframe 会是不同的域？
@NoBugs 我不是 100% 确定，但我似乎记得如果您的 iframe 加载来自不同域的资产，则会存在安全限制。我已经看到使用 localStorage 来克服 iframe 的安全限制的黑客攻击，但我自己还没有实现类似的东西。我倾向于避免使用 iframe。
@JimSchubert 绝对其他网站不应该看到其他人的内容或本地存储。如果它是同源的，则很容易从 js 访问 iframe 窗口和文档。

【解决方案1】：

您可以通过这种方式使用 jQuery 访问 iframe 中的内容轻松地做到这一点：

$( 'your-iframe' ).contents().find( 'elements-to-find' ).droppable();

为确保在运行脚本时加载 iframe 内容，您必须等待 iframe 的 jQuery load 事件。

$('your-iframe').load(function() {

    $( 'your-iframe' ).contents().find( 'elements-to-find' ).droppable();

});

我和你有同样的需要，并设法以这种方式在 iframe 之间进行拖放，一切正常。

【讨论】：