Question

我目前有一个可以使用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/

当list从视口扩展出来时，jquery ui可排序

1 个答案: