jquery ui当列表扩展出视口时可排序

我目前有一个很大的列表，可以使用sortable jquery插件来订购。问题是，如果用户想从列表顶部拿一个项目并将其拖到最底部，那就非常笨重。你需要保持移动/咯咯鼠标才能让窗口滚动。jquery ui当列表扩展出视口时可排序

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>

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

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

是否有一个修复程序使用户能够向下拖动列表项，它自动滚动，直到用户是否在列表中的首选位置？

来源

2017-05-31 steve

我不知道这是可能的，但如果你不介意的选择，我会说，你可以使用双列的列表，其中另一列是一个临时列。因此，用户可以将他的列表放到他想要的位置，然后将项目从温度切换回永久 – Sagar

当鼠标位于边缘参数范围内并且处于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/

来源

2017-05-31 14:21:34 Vector

jquery ui当列表扩展出视口时可排序

回答

相关问题