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

Question

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

我想在没有任何可排序的 div 重叠的情况下这样做。

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

编辑：如果您转到上面的小提琴并扩展可排序项目的宽度，然后将其移动并放下。您会看到它与其他可排序项目重叠。我希望安排所有可排序的项目，以免重叠。

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

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

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

编辑：jquery fullCalendar 完全符合我的需要，但他们是如何做到的？ http://arshaw.com/fullcalendar/

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

Answer 1

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

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

我建议你做与 fullcalendar 相同的事情，使用 draggable 和 resizable 插件，并在重叠时使用绝对位置将元素移开与其他物品。

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

Answer 2

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

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

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

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