Jquery UI， "dead area"带有可排序的 portlet

Question

我正在尝试创建一个基于 portlet 的页面，其中 portlet 具有不同的大小。

问题是要解决“2.2 portlet”左侧的“死区”，“1.1 portlet”或“2.1 portlet”将适合该空间，但是是否有可能共谋以及如何实现？

页面的宽度是固定的，应该保持这样，http://www.jsfiddle.net/XF2pV/

如果 jQuery UI 无法实现这一点，我愿意接受其他框架的建议。

Answer 1

不幸的是，这个方法是有缺陷的。将 jquery sortable 与不同大小项目的网格布局一起使用将导致此行为。原因是在 html 和 css 中，您正在创建一个向左浮动的项目列表，当允许将其包装在固定宽度的容器中时，将留下实际上无法使用的间隙。

事实上，您的容器宽度是固定的，并且您的盒子也是固定大小的，这意味着可以很容易地尝试另一种定位它们的方法。尝试使用绝对定位，仅使用 css 和 html 来让所有空格完全按照您最初想要的方式填充，然后尝试使用 javascript 来移动框。

但是，我怀疑“可排序”jQuery 库在使用绝对定位时是否会起作用(我必须承认我从未使用过它)。使用绝对定位，当使用绝对定位时，很可能让项目“移开”。你把东西拖过它们就会有问题。您可能需要定义一组隐藏的 div 来充当您的“网格” - 或者您可以放置​​内容的位置，以及另一组包含您想要移动的可见内容的 div。 jQuery 可拖动和可放置 api 会有所帮助，但您将需要进行更多编码，以确保您将项目“捕捉”到位，并在放置其他项目时将其移开。

这看起来相关https://stackoverflow.com/questions/2133677/jquery-sortable-divs-replicate-bbc-home-page也许你可以查看 BBC 主页的源代码。 http://bbc.co.uk