jquery可排序和可调整大小的重叠列表项

Pau*_*MrG 8 jquery jquery-ui-sortable resizable

我有多个可排序列表并排.您可以调整div的宽度以覆盖其他列表.这使一个项目成为多个列表的一部分.

我想这样做,没有任何可重复的div重叠.

请参阅http://jsfiddle.net/2J6af/上的小提琴

编辑:如果你去上面的小提琴并扩展可排序项目的宽度,然后移动它并放下.您会看到它与其他可排序项目重叠.我想要排列所有可排序的项目,以便没有重叠.

编辑:我已经通过@KateA建议再次处理重叠的jQuery可排序列表,虽然它类似,但它讨论的是列表重叠而不是覆盖多个列表的可排序项.

编辑:在完成的产品中将有7个列表并排,我需要在用户丢弃项目后按特定顺序重新排列可排序.我知道你可以在sort:event中添加一个函数,也许这是重新排列和检查/纠正任何重叠的可排序项的关键功能?

编辑:我也注意到,取决于如果你已经使用向左或右手柄调整它拖动时可排序的项目的行为不同.对于你正在盘旋的列表感到困惑.例如,如果您使用左手柄调整大小并将其拾起并尝试将其放在中间或右侧列表中,它将下降到鼠标指针左侧的下一个列表,而不是显示在下方的空占位符的位置.鼠标指针.

编辑:jquery fullCalendar确实超出了我的需要,但他们是如何做到的?http://arshaw.com/fullcalendar/

编辑:我一直在努力扩展小提琴到我的可排序知识的范围,你认为我走在正确的轨道上?http://jsfiddle.net/2J6af/17/

Bil*_*lly 2

您正在尝试的事情存在一些问题,但我已经设法制作了一个示例来修复其中的一些问题。总体问题是,这两个 Jquery UI 插件(可排序、可调整大小)不支持您想要的所有功能,因此至少有一个(如果不是全部)都必须重写或从头开始实现。一些问题包括:

  1. 西手柄会导致宽度增加,CSS“左”属性减少,从而导致左侧列表项出现问题。东边和右侧也存在同样的问题。
  2. 将列表项定位为“相对”或“绝对”将导致它们不占用页面流中的空间,从而导致重叠。
  3. 拥有三个独立的 div 意味着每个项目只能是一个列表的成员,并且您必须检查宽度以查看它是否还占用其他列。有点乱。

在我提供的示例之上,我相信您需要以编程方式保留一个数据模型,该模型将跟踪每个项目及其存在的列,并允许它根据需要在显示中进行更正。

我认为这都是与代表一周以及该时间范围内发生的事情有关的一些内容。虽然我认为我已经解决了您问题的主要问题,但我发现这个问题很有趣,如果您提供更多背景信息,我愿意为最终产品提供帮助。