JQuery sortable（具有不同高度的项目）移动到第一个或最后一个位置很麻烦

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 更加宽容。