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

Question

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

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

然而，jQuery UI中的定位计算似乎正在变得混乱。拖拽东西不会显示流畅的移动-似乎什么都没有发生，但是点击足够多的东西会在整个页面上移动元素(它们被position: absolute样式卡住了)。

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

解决方案1：

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

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/

我正在研究第二个解决方案，但我还不知道它的可行性。