我已经在我的项目中实现了可排序的 jQuery UI。在我的实现中,我有大量记录,平均约为 10,000 条。我将每条记录的索引存储在我的数据库中。
实现工作正常,但由于 mCustomScrollbar,排序功能非常生涩。当我到达最后一个可见记录时,滚动无法正常工作。我在这里创建了我的实现示例。
我缺少 mcustomscrollbar 中的任何属性。我将以下代码用于自定义滚动条:
<script>
(function($){
$(window).on("load",function(){
/* call mCustomScrollbar function before jquery ui sortable() */
$("#sortable").mCustomScrollbar({
scrollbarPosition:"outside",
scrollInertia:450,
theme:"light-2"
});
$("#sortable ul").sortable({
axis:"y",
cursor:"move",
tolerance:"intersect",
change:function(e,ui){
var h=ui.helper.outerHeight(true),
elem=$("#sortable .mCustomScrollBox"),
elemHeight=elem.height(),
moveBy=$("#sortable li").outerHeight(true)*3,
mouseCoordsY=e.pageY-elem.offset().top;
if(mouseCoordsY<h){
$("#sortable").mCustomScrollbar("scrollTo","+="+moveBy);
}else if(mouseCoordsY>elemHeight-h){
$("#sortable").mCustomScrollbar("scrollTo","-="+moveBy);
}
}
});
});
})(jQuery);
</script>
更新
我还实现了 Kendo Sortable 以及完美的滚动条,但它也不起作用。与 Kendo Sortable 的 Plunker 链接在这里