Jquery UI,带有可排序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 会有所帮助，但您将需要进行更多编码，以确保您将项目“捕捉”到位，并在放置其他项目时将其移开。

这看起来相关/sf/ask/149357421/也许你可以检查BBC主页的源代码。http://bbc.co.uk