使用可跨浏览器窗口排序的 jQuery UI答案

【问题标题】：Using jQuery UI sortable across browser windows使用可跨浏览器窗口排序的 jQuery UI
【发布时间】：2012-08-30 21:48:59
【问题描述】：

我正在尝试使用 jQuery UI 的 sortable 使浏览器弹出窗口（即window.open()，不是某种模式）中的列表项可排序。基本上：

popup = window.open("", "_blank").document.body;
list = popup.appendChild(...);
$(list).sortable();

然而，jQuery UI 中的定位计算似乎变得一团糟。拖动东西并不会显示流畅的移动——似乎什么都没有发生，但点击足够多的地方会在整个页面上移动元素（它们被困在位置：绝对样式中）。

在弹出窗口本身的相同样式/标记上运行可排序的 jQuery UI 可以正常工作，因此问题似乎源于父窗口上的 jQuery 试图计算子窗口 DOM 中的位置。将子 DOM 上的容器传递给 jQuery UI sortable 的 containment 选项没有帮助。

有什么方法可以告诉父窗口 jQuery，它需要针对子窗口的文档进行所有计算？

【问题讨论】：

你能用你的部分工作代码发布一个 jsfiddle 吗？会有很大帮助的。
应用代码其实都是ClojureScript，所以没有jsfiddle。

标签： jquery jquery-ui popup

【解决方案1】：

我可能会选择绕过这个问题，并简单地创建一个空白文档，其中包含一个容器和 JS 包装器，用于您希望从父级调用的任何函数——而不是打开一个完全空白的文档，而是打开一个基本上是空的包含任何必要的内置函数以及它自己对 jQuery 库的引用的文档，但它接受来自父级的函数调用来填充它（例如，popup.FunctionName(var) 等）。如果孩子需要和家长交流，基本同理即可。

这样，您只需通过隔离 jQuery 调用来避免 jQuery 在其操作范围上变得模糊时遇到的任何问题，基本上只在它们应该影响的窗口内调用它们。

【讨论】：

用你描述的方法绕过问题效果很好；谢谢你的建议。

【解决方案2】：

我同意 DoctorJest 的观点，即打开另一个窗口可能不是最好的解决方案。如果您已经在使用 jquery UI，您是否考虑过.dialog()？ jsFiddle

$( "#dialog-modal" ).dialog({
    modal: true,
    open: function(){
        $( "#sortable" ).sortable();
    }
});

【讨论】：

弹出窗口需要可作为单独的文档打印，因此对话框已退出。否则，是的，这将是最简单的解决方案。

【解决方案3】：

一种解决方案（如下）是使用 HTML5 拖放 API 创建连接的可排序列表（即，您可以从弹出窗口拖动到父级，反之亦然）。

另一种方法是简单地将相关的 jQuery UI 功能（在本例中为 jquery.ui.sortable.js）复制到弹出窗口。但是，您将无法从弹出窗口拖动到父窗口。

解决方案 1：

这使用 Ali Farhadi 的 jQuery HTML5 Sortable 插件来创建多窗口可排序列表。

JavaScript：

var popup = window.open("", "_blank").document.body;
var list = popup.appendChild($("#list")[0]);
var parentList = $("#parent-list")[0];

$(parentList).sortable({
    connectWith: ".connected"
});

$(list).sortable({
    connectWith: ".connected"
});

演示：http://jsfiddle.net/SO_AMK/VED6D/

我正在研究第二种解决方案，但我还不知道它是否可行。

【讨论】：