当列表扩展到视口时，jQuery UI可排序

Question

i当前有一个可以使用sortable jQuery插件订购的大列表。问题是，如果用户想从列表的顶部取一个物品并将其拖到底部，则非常笨拙。您需要继续移动/咯咯笑鼠标才能使窗口滚动。

html

  <ul id="sortable">
    <li class="ui-state-default">List Item</li>
    <li class="ui-state-default">List Item</li>
    // 50+ more list items
</ul>

JS

$("#sortable").sortable();

演示小提琴：http：//jsfiddle.net/rmsgx/490/

是否有一个修复程序可以使用户可以将列表项拖动并自动滚动，直到用户在列表中的首选位置？

Answer 1

当鼠标处于边缘的参数且处于out模式事件中时，可以通过触发滚动操作。

您不能基于视口，您需要通过容器来执行此操作。

在您的示例中，我将包含的列表元素设置为视图减去50px的高度。这给出了间隙的顶部和底部以允许调用动作。

$('#sortable').css({height: ($(window).height()-50) + 'px'});
var scroll = '';
var $scrollable = $("#sortable");
function scrolling() {
  if (scroll == 'up') {
    $scrollable.scrollTop($scrollable.scrollTop() - 20);
    setTimeout(scrolling, 50);
  } else if (scroll == 'down') {
    $scrollable.scrollTop($scrollable.scrollTop() + 20);
    setTimeout(scrolling, 50);
  }
}
$("#sortable").sortable({
  scroll: false,
  out: function(event, ui) {
    if (!ui.helper) return;
    if (ui.offset.top > 0) {
      scroll = 'down';
    } else {
      scroll = 'up';
    }
    scrolling();
  },
  over: function(event, ui) {
    scroll = '';
  },
  deactivate: function(event, ui) {
    scroll = '';
  }
});

演示：http：//jsfiddle.net/kplcode/rmsgx/492/