Jquery UI使用MCustomScrollbar可排序的生涩行为

时间:2017-04-19 09:06:32

标签: jquery jquery-ui frontend jquery-ui-sortable mcustomscrollbar

我在我的项目中实现了jQuery UI可排序。在我的实现中,我有大量的记录,平均约10,000。我将每条记录的索引存储在我的数据库中。

实现工作正常但由于mCustomScrollbar,排序功能非常不稳定。当我到达最后一个可见记录时,滚动无法正常工作。我已经创建了一个我的实现示例here

我缺少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链接为here

0 个答案:

没有答案