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

Question

>问题

我的可排序列表有问题，其中包含几个不同高度的项目。当我尝试将较大的项目移动到第一个或最后一个位置（两者都有较小的对象）时，会出现此问题。我目前是否成功在很大程度上取决于我单击并开始拖动的较大项目的位置。

如果我想将项目移动到较小的底部位置，

则必须单击靠近项目底部的位置才能使其工作，如果我想将其拖动到顶部位置，则必须紧紧单击顶部。但我希望能够通过单击任何地方来拖动项目。

一些附加信息

这些项目不能拖到父项之外，父项只能拖动到它必须的大小，如果它大于其容器，则会显示滚动。因此，如果我不将其拖动到项目顶部，则似乎无法将较大的项目拖过第一个（较小的）项目。

我一直在尝试通过使用 cursorAt 并使用 top：0 来解决此问题另一个使用 bottom：0 的测试但它似乎没有任何区别（所以我可能误解了如何使用它）。我目前正在使用公差：指针。

我可以绕过无法将较大项目拖动到最后一个位置的问题，方法是在排序过程中临时增加高度，增加拖动项目的高度。但它并不总是有效，也不是一个很好的解决方案。并且无法将其拖到顶部的问题仍然出现？

我无法像 jquery-sortable-with-containment-parent-and-different-item-height 中那样更改 JQuery 代码

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

感谢您的帮助！

Answer 1

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

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

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

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