拖动内容，滚动条滚动，横向

Posted on 2018-08-16 09:53 WebEnh 阅读(1657) 评论(0) 编辑收藏举报

/**
 * 拖动内容，滚动条滚动，横向
 * @param {string} container 需要拖动的面板
 */
function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
 
    $(document.body).on("mousedown", container, function (event) {
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
    });
 
    $(container).on("mousemove", function (event) {
        if (flag) {
            var moveX = event.clientX;
            var scrollX = moveX - downX;
            console.log("moveX" + moveX);
            console.log("scrollX" + scrollX);
            if (scrollX < 0 && scrollLeft > 0) {
                $(this).scrollLeft(scrollLeft - scrollX)
            }
            else {
                $(this).scrollLeft(scrollLeft - scrollX)
            }
        }
    });
 
    $(container).on("mouseup", function () {
        flag = false;
    });
 
    $(container).on("mouseout", function (event) {
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
            flag = false;
        }          
    });
}
 
dragMoveX(".table-container");