Jquery ui 在iframe中创建jQuery UI可排序表

在一个页面上，我有一个iframe。在这个iframe中，是我需要进行排序的项的集合。所有Javascript都在父页面上运行。我可以访问iframe文档中的列表，并使用上下文创建可排序表：

var ifrDoc = $( '#iframe' ).contents();

$( '.sortable', ifrDoc ).sortable( { cursor: 'move' } );

然而，当我尝试对项目进行实际排序时，我得到了一些异常行为。一旦单击某个项目，脚本的目标就会更改为外部文档。如果将鼠标移离iframe，则可以通过单击来移动项目并将其放回原位，但不能在iframe内与其交互

例如：

---

那么，有没有一种方法可以实现我想要做的事情——最好不用在jQueryUI代码中进行黑客攻击

我不知道你的代码为什么不起作用。看起来应该是这样

也就是说，这里有两种实现此功能的替代方法：

如果您可以修改iframe

将JavaScript从父文档移动到

iframe test.html

。这可能是最干净的方式，因为它将JavaScript与其实际执行的元素相耦合。

如果您仅控制父文档

使用jQuery.load（）方法获取内容，而不是HTML iframe。

---

在使用了一点javascript之后，CampaignMonitor基本上通过拥有一个自定义版本的jQueryUI来解决这个问题。他们修改了ui.mouse和ui.sortable，将对文档和窗口的引用替换为获取相关元素的文档和窗口的代码<代码>文档变为

此元素[0]。所有者文档

---

它们有一个名为window（）的自定义jQuery函数，可以用

this.element.window（）

或类似的函数替换

window

。

动态地将jQuery和jQuery UI添加到iframe（）：

​ 更新：jQuery UI保存并使用对加载jQuery UI的页面的

窗口

和

文档

的引用。通过将jQuery/jQuery UI加载到iframe中，它具有正确的引用（对于iframe，而不是外部文档），并按预期工作

---

更新2:原始代码片段有一个微妙的问题：动态脚本标记的执行顺序无法保证。我已经对其进行了更新，以便在jQuery就绪后加载jQuery UI

---

我还将getify的代码合并到，因此无需轮询。

无需在iFrame中加载jQuery和jQueryUI，并在父级和子级中评估jQueryUI交互，您只需将鼠标事件冒泡到父级文档：

var ifrDoc = $( '#iframe' ).contents();

$('.sortable', ifrDoc).on('mousemove mouseup', function (event) {
    $(parent.document).trigger(event);
});

---

通过这种方式，您可以在父文档上下文中评估所有Javascript。

当然可以，但这不是我的用例。我只控制父文档。很好。我用第二种方法更新了我的答案，这可能对你有用，即使它不能回答问题。这是一个非常有趣的观点，也是我没有想到的。我不知道它是否适用于产生我的问题的更复杂的系统，但我肯定会看看它。谢谢我们现在就是这样处理的。我基本上已经编写了一个插件，它用可以工作的代码扩展了必要的函数。这是骇人听闻的，而且，我担心，是针对我们的情况。你能提供一个链接到一个资源，让其他有这个问题的人来解决它吗？嘿，安德鲁，你能发布自定义jQuery文件的链接吗？嘿，安德鲁，你能发布这个文件的链接吗，我想我会采用这种方法。或者是导游。谢谢！对我来说，这似乎是一个足够干净的解决办法。你能补充一个解释，或者一个链接，解释为什么这可以解决这个问题吗？“对我来说，这似乎是一个足够干净的解决办法。”。真正地这是直接投票。这是一个可怕的生产解决方案。一定有比这更好的方法。@kamelkev演示代码只是为了说明答案（将jQuery和jQuery UI加载到iframe中）；无法保证生产准备就绪。不过，我已经更新了答案，使其不使用轮询。

var ifrDoc = $( '#iframe' ).contents();

$('.sortable', ifrDoc).on('mousemove mouseup', function (event) {
    $(parent.document).trigger(event);
});