8

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

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

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

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

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

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

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

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

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

4

2 回答 2

3

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

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

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

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

于 2012-04-18T07:26:59.060 回答
2

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

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

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

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

于 2012-04-14T17:30:46.360 回答