为什么我无法将可排序的jQuery ui排序为“平滑"?水平自动滚动? [英] Why can't I get jquery ui sortable to have a "smooth" horizontal auto scroll?

问题描述

我有一个网页使用可排序的jquery UI 和connectwith来获得列表列表(请考虑类似于 trello ).一个问题是，当列数超过窗口宽度时，我似乎无法获得平滑的水平自动滚动.因此，当我向右拖动项目时执行水平滚动时，我还必须向上或向下拖动一点，以使滚动条向右移动(而不是直接向右拖动而不会产生额外的麻烦)

I have a web page that uses jquery UI sortable with connectwith to have a list of lists (think similar to trello). One issue is that i can't seem to get a smooth horizontal auto scroll when the number of columns exceeds the window width. So when the horizontal scroll get enacted when I drag an item to the right I have to also drag a bit up or down to get the scroll bar to move to the right (instead of just doing it by dragging directly right without this extra fiddling).

这是我的代码的 jsfiddle示例，显示了该行为.尝试从第一列中取出一个项目，并将其放在右侧的最后一个列表中.

Here is a jsfiddle example of my code that shows the behavior. Try to take an item from the first column and put it on the last list to the right.

注意:您必须使窗口不要太宽，以确保所有6个列"都不可见以实现此行为.完成此操作后，如果您看到水平滚动条到达边缘后就变得断断续续".

NOTE: you must make the windows not too wide to make sure that all 6 "columns" aren't visible to get the behavior. Once you do this, if you see the horizontal scroll gets "choppy" after you get to the edge.

使用jquery ui可排序时，是否仍然可以获得平滑的水平自动滚动

Is there anyway to get a smooth horizontal auto scrolling when using jquery ui sortable

推荐答案

就像注释中提到的Zach Saucier一样，您的示例不会触发水平滚动.不过，用display: inline-block替换float: left确实可以按照您的描述进行操作.

Like Zach Saucier mentioned in the comments, your example doesn't trigger horizontal scrolling. Replacing float: left with display: inline-block does work as you describe, though.

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

To solve your problem, try adding the scrollSensitivity: 100 to the list of options to the sortable call, e.g.:

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

根据需要调整值.该引用在API中 .

Adjust value as needed. This is referred to in the API.

这篇关于为什么我无法将可排序的jQuery ui排序为“平滑"?水平自动滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！