jQuery可排序和可调整大小，具有重叠的列表项。

Question

jQuery可排序和可调整大小，具有重叠的列表项。

jqueryjquery-ui-sortableresizable

8

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

我希望在不重叠的情况下完成此操作。

请参见http://jsfiddle.net/2J6af/上的演示。

编辑：如果您扩展可排序项的宽度，然后将其移动并放置。您会发现它会与其他可排序项重叠。我希望所有可排序项都排列在一起，没有重叠。

编辑：正如@KateA建议的那样，我已经再次查看了处理重叠的jQuery可排序列表，尽管它相似，但它讨论的是列表重叠而不是可排序项覆盖多个列表。

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

编辑：我还注意到，可排序项目在拖动时的行为会因为您使用左侧或右侧手柄进行调整大小而异。它会混淆您悬停的列表。例如，如果您使用左侧手柄进行调整大小，并将其拾起并尝试将其放置在中间或右侧列表上，它将放置在鼠标指针左侧的下一个列表而不是在鼠标指针下方显示空占位符的位置。

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

编辑：我一直在扩展fiddle，以尽我所知的可排序的知识，您认为我走在正确的轨道上吗？ http://jsfiddle.net/2J6af/17/

- PaulMrG

看一下这个网址：https://dev59.com/pFHTa4cB1Zd3GeqPTJ4J 那个帮了我很多。 - KateA

我在提问之前看过那篇帖子，但那是一个不同的问题。 - PaulMrG

1

可以绑定resizable事件，找出元素现在跨越了多少个列表，然后在元素跨越的每个列表中相同位置（相同索引）放置占位符元素。 - mikeycgto

@mikeycgto 听起来是个不错的想法，但我不知道如何从UI获取那些信息，或在拖放后手动更改顺序？第四次编辑中还存在拖动问题。我注意到fullCalendar仅允许在右侧调整大小，这可能有所帮助。 - PaulMrG

2个回答

2

你尝试的事情存在一些问题，但我已经制作了一个示例来解决其中的一些问题。总体问题是这两个Jquery UI插件（sortable，resizable）不支持您想要的所有功能，因此至少其中之一（如果不是两者都）必须被重写或从头实现。一些问题包括：

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

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

我理解这与代表一周和在这段时间内发生的事情有关。虽然我认为我已经回答了你问题的主要问题，但我觉得这个问题很有趣，如果你提供更多的背景信息，我愿意帮助你完成最终产品。

- Billy

嗨@Billy，你能否更新一下 - 示例链接指向我的原始fiddle？ - PaulMrG

我正在开发的整体产品是一个日历，具有类似于fullCalendar的事件功能，但使用div而不是表格。它可以垂直滚动并且连续。 div ids保存日期信息的格式为“＃calmdDate-2012-04-19”，内容div用于事件列表“＃calmdDate-2012-04-19-content”。这可能有助于您考虑什么？ - PaulMrG

如果我将一个为期两天的事件拖到星期四，那么已经在星期四的事件会被移动到星期六吗？ - Billy

不，星期四的列表必须重新排序，以便它们都适合，就像在fullCalendar中一样。 - PaulMrG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- guzart · Accepted Answer

fullcalendar似乎在背景上有一个可视化网格，在虚拟网格中的可排序项目位于顶部，因此它们很可能是手动计算其位置。jQueryUI排序的方式是向列表添加占位符，自然地（页面流）显示放置的空间。我建议不要这样做，我认为你无法干净地hack jQueryUI以获得所需的行为。我建议您像fullcalendar一样使用draggable和resizable插件，并在与其他项目重叠时使用绝对定位移动元素。不要将捕捉功能设置为可拖动的，而是基于可拖动的位置计算碰撞并决定如何处理它们，无论是向上还是向下移动它们。