为什么我不能让 jquery ui 可排序以具有“平滑”的水平自动滚动？

Question

我有一个带有 connectwith 的网页 that uses jquery UI sortable 有一个列表列表（认为类似于 trello）。一个问题是，当列数超过窗口宽度时，我似乎无法获得平滑的水平自动滚动。因此，当我将一个项目向右拖动时，水平滚动生效时，我还必须向上或向下拖动一点以使滚动条向右移动（而不是直接向右拖动而不需要额外的摆弄） .

这是一个jsfiddle example of my code，它显示了该行为。尝试从第一列中取出一个项目并将其放在右侧的最后一个列表中。

注意：您必须使窗口不要太宽，以确保所有 6 个“列”都不可见以获取行为。一旦你这样做了，如果你看到水平滚动在你到达边缘后变得“不稳定”。

在使用 jquery ui sortable 时是否有平滑的水平自动滚动

Answer 1

就像 cmets 中提到的 Zach Saucier 一样，您的示例不会触发水平滚动。不过，将 float: left 替换为 display: inline-block 确实如您所描述的那样工作。

要解决您的问题，请尝试将scrollSensitivity: 100 添加到sortable 调用的选项列表中，例如：

$(function () {
  $("#sortable1, #sortable2, #sortable3, #sortable4, #sortable5, #sortable6").sortable({
    connectWith: ".connectedSortable",
    scrollSensitivity: 100
  }).disableSelection();
});

根据需要调整值。这被称为in the API。