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

标签 jquery jquery-ui

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

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

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

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

最佳答案

不幸的是,这个方法是有缺陷的。将 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

关于Jquery UI, "dead area"带有可排序的 portlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4780178/

相关文章:

javascript - 发送包含浏览器功能和屏幕尺寸等的电子邮件

javascript - 在 DataTables 中切换列后设置以前的列宽

javascript - 模拟 Android 浏览器中触摸事件的悬停行为

jquery 自动完成 : Select item in suggestions

javascript - 如何在模式中调整 API Google Map 的大小以避免灰屏

css - jQuery UI可排序,继续在右侧添加空间

javascript - Jquery UI slider 选项对象

jquery - 为什么 jGrowl 弹出窗口看起来不像预期的那样?

JQuery UI 可拖动元素在选项卡更改时消失

javascript - 使用户无法控制文本区域的大小