jquery ui 当列表扩展到视口之外时可排序

Question

我目前有一个很大的清单，可以使用 sortable jquery 插件订购。问题是，如果用户想从列表顶部取出一个项目并将其拖到底部，那将非常笨拙。您需要保持 moving/giggling 鼠标以便 window 滚动。

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();

演示 Fiddle：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/

jquery ui 当列表扩展到视口之外时可排序

jquery ui sortable when list expands out of viewport

javascript

jquery

jquery-ui

jquery-ui-sortable