移动到第一个或最后一个位置的JQuery可排序(具有不同高度的项目)很麻烦

Question

问题

我的可排序列表存在问题,其中有几个不同高度的项目.当我试图将较大的项目移动到第一个或最后一个位置(两个都有较小的对象)时,会出现问题.如果我目前成功,很大程度上取决于我点击的较大项目的位置并开始拖动.

如果我想将项目移动到较小的底部位置,我必须单击靠近项目的底部才能使其工作,如果我想将其拖动到顶部位置,我必须紧靠顶部.但我希望能够通过点击任意位置来拖动项目.

一些额外的信息

这些项目不能在父项之外拖动,而父项目只有它必须大,如果它比它的容器大,则会出现滚动.因此,如果我不将它拖动到项目的顶部,我似乎无法将较大的项目拖过第一个(较小的)项目.

我一直试图通过使用cursorAt并使用top:0和另一个使用bottom的测试来解决这个问题:0但它似乎没有任何区别(所以我可能误解了如何使用它).我目前正在使用容差:指针.

我可以绕过在排序过程中不能通过临时将较大的项目拖动到最后位置的问题,随着拖动项目的高度增加高度.但它并不总是有效,它不是一个很好的解决方案.还没有出现无法将其拖到顶部的问题？

我不能像在jquery-sortable-with-containment-parent-and-different-item-heights中那样更改JQuery代码

问题: 如何将较大的项目拖动到顶部或底部位置,同时允许用户单击项目上的任何位置？

谢谢你的帮助!

Answer 1

这可能无法解决您的问题，但我想我应该分享我今天所做的一些实验的结果。我需要制作一个可排序的照片库，其中包含不同宽度的内嵌块图片，并且发现移动更宽的照片非常困难，因为占位符比我要移动的项目小。我最终使用了这个：

    container.sortable({
        placeholder: "photo placeholder",
        start: function (event, ui) {
            ui.placeholder.width(ui.item.width());
        }
    });

自定义占位符类可确保默认情况下占位符不会隐藏，并且事件start可确保占位符与您要移动的项目的宽度相同。这对我来说非常有效，在你的情况下，用高度代替宽度可能会起作用。

我也尝试containment像您所做的那样使用，发现有时根据行中的项目使事情变得更加困难。正如您所解释的，包含tolerance: "pointer"有助于缓解问题，但如果可能的话，删除containment通常会使 UI 更加宽容。