jquery-ui - JQuery sortable(具有各种高度的项目)移动到第一个或最后一个位置很麻烦

Question

问题

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

如果我想将项目移动到较小的底部位置，我必须在靠近项目底部的位置单击它才能工作，如果我想将它拖到顶部位置，我必须靠近顶部单击。但我希望能够通过单击任意位置来拖动项目。

一些附加信息

这些项目不能被拖到父级之外，并且父级只有它必须的大小，并且如果它大于它的容器，则会出现一个滚动。因此，如果我不将较大的项目拖到项目的顶部，我似乎无法将其拖过第一个(较小的)项目。

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

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

我无法更改 jquery-sortable-with-containment-parent-and-different-item-heights 中的 JQuery 代码

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

谢谢你的帮助!

Answer 1

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

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

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

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