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通常会使用户界面更加宽容。

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

1 个答案: