jquery 可排序并可调整大小并具有重叠的列表项

Question

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

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

查看 fiddle http://jsfiddle.net/2J6af/

编辑:如果您转到上面的 fiddle 并扩展可排序项目的宽度，然后将其移动并放下。您会看到它与其他可排序项目重叠。我希望所有可排序的项目都经过排列，这样就不会重叠。

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

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

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

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

编辑:我一直在努力将 fiddle 扩展到我的可排序知识范围内，您认为我走在正确的道路上吗？ http://jsfiddle.net/2J6af/17/

Answer 1

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

jQueryUI 进行排序的方式是向列表中添加一个占位符，这自然(页面流)会显示放置的空间。我建议不要这样做，我认为没有办法可以干净地破解 jQueryUI 以获得您正在寻找的行为。

我建议您执行与 fullcalendar 相同的操作，使用 draggable 和 可调整大小 插件，并在重叠时使用绝对位置将元素移开与其他项目。

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