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

Question

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

我希望在没有任何可排序的div重叠的情况下执行此操作。

见http://jsfiddle.net/2J6af/

的小提琴

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

编辑：我已经按照@KateA的建议再次通过了Dealing with overlapping jQuery sortable lists，尽管它很相似，但它讨论的是重叠列表而不是涵盖多个列表的可排序项目。

编辑：在成品中并排有7个列表，我需要在用户放弃项目后按特定顺序重新排列可排序。我知道你可以为sort：event添加一个函数，也许这是重新排列和检查/纠正任何重叠可排序项的关键函数？

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

编辑：jquery fullCalendar确实可以满足我的需求，但他们是如何做到的？ http://arshaw.com/fullcalendar/

编辑：我一直在努力将小提琴扩展到我的可分类知识的范围，你认为我走在正确的轨道上吗？ http://jsfiddle.net/2J6af/17/

Answer 1

fullcalendar 似乎在背景上有一个可视网格，可排序的项目位于虚拟网格的顶部，因此他们很可能手动计算其位置。

jQueryUI执行Sortable的方式是在列表中添加占位符，自然（页面流）显示 drop 的空间。我建议不要这样做，我不认为有一种方法可以干净地 hack jQueryUI来获得你正在寻找的行为。

我建议你做与fullcalendar相同的事情，使用 draggable 和可调整大小的插件，并在重叠时使用绝对位置移动元素与其他项目。

不要将捕捉功能设置为可拖动，但根据可拖动的位置，计算碰撞并决定如何处理它们，或者向上或向下移动它们。

Answer 2

您尝试的内容存在一些问题，但我设法制作了example来解决其中一些问题。最重要的是，这两个Jquery UI插件（可排序，可调整大小）不支持您想要的所有功能，因此至少有一个（如果不是两个）必须从头开始重写或实现。一些问题包括：

1. 西方句柄导致宽度增加，css“left”属性减少，导致左侧列表项出现问题。东部和右侧存在同样的问题。
2. 将列表项定位为“relative”或“absolute”将导致它们不占用页面流中的空间，从而重叠。
3. 有三个单独的div意味着每个项目只能是一个列表的成员，您必须检查宽度以查看它是否也占据其他列。它有点乱。

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

我已经知道，这就是代表一周的所有事情以及在那段时间内发生的事情。虽然我认为我已经解决了你的问题的主要问题，但我发现这个问题很有趣，如果你提供更多的背景，我愿意帮助最终产品。