1

我正在尝试使用 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选项没有帮助。

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

4

3 回答 3

2

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

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

于 2012-09-10T10:08:04.200 回答
0

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

$( "#dialog-modal" ).dialog({
    modal: true,
    open: function(){
        $( "#sortable" ).sortable();
    }
});
于 2012-09-13T16:20:44.987 回答
0

一种解决方案（如下）是使用 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/

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

于 2012-09-13T16:24:59.373 回答