表格横向拖动

controlColumnWidthNew = function(config) {
    var config = config;
    var _createGrips = function _createGrips(config) {
        $('.JCLRgrips:visible').remove();
        var div = '<div class="JCLRgrips"></div>';
        var tableTd = $(config.el).find('tr:eq(0) td');
        var height = $(config.el).height();
        if (!tableTd.length) return;
        var length = tableTd.length;
        var verticalBars = [];
        $.each(tableTd, function(index) {
            if (index == length - 1) return false;
            var left = 0;
            for (var i = 0; i < index + 1; i++) {
                left += $(tableTd[i]).outerWidth();
            }
            left -= $('.headerFrozen:visible').outerWidth() || 0;
            var verticalBar = '<div class="JCLRgrip" style="left: ' + left + 'px; height:' + height + 'px"><div class="JColResizer"></div></div>';
            verticalBars.push(verticalBar);
        });
        $(config.el).parent().prepend('<div class="JCLRgrips">' + verticalBars.join('') + '</div>');
        var mouseEvent = function mouseEvent(e) {
            switch (e.type) {
                case 'mousedown':
                    $(this).parent().addClass('dragging');
                    $(this).parent().prev().addClass('dragging-before');
                    $(document).bind('mousemove', mouseEvent);
                    var dragging = $('.dragging');
                    var index = dragging.index();
                    var width = 0;
                    if (index > 0) {
                        width = dragging.offset().left - dragging.parent().find('.JCLRgrip:eq(' + (index - 1) + ')').offset().left;
                    } else {
                        width = dragging.offset().left - $(config.el).offset().left;
                    }
                    $.each($(config.el).find('tr'), function(_, itm) {
                        var dataWidth = $(itm).find('td:eq(' + index + ')').data('width');
                        if (!dataWidth) {
                            $(itm).find('td:eq(' + index + ')').data('width', width);
                        } else {
                            return false;
                        }
                    });
                    document.onmousedown = function() {
                        return false;
                    };
                    break;
                case 'mouseup':
                    var dragging = $('.dragging');
                    var index = dragging.index();
                    if (!dragging.length) return;
                    if (!$(config.el).find('tr:eq(0) td:eq(' + index + ')').hasClass('frozen') && !$(config.el).find('tr:eq(0) td:eq(' + index + ')').hasClass('checkedRow')) {
                        var width = 0;
                        var columnKey
                        if (index > 0) {
                            width = dragging.offset().left - dragging.parent().find('.JCLRgrip:eq(' + (index - 1) + ')').offset().left;
                        } else {
                            width = dragging.offset().left - $(config.el).offset().left;
                        }
                        $.each($(config.el).find('tr'), function(_, itm) {
                            // var dataWidth = $(itm).find('td:eq(' + index + ')').data('width')
                            var dataWidth = 20;
                            if (width < dataWidth) width = dataWidth;
                            $(itm).find('td:eq(' + index + ')').css({
                                'min-width': width,
                                'max-width': width,
                                width: width
                            });
                            console.log("itm:",itm)
                            columnKey = $(itm).find('td:eq(' + index + ')').attr('data-key');
                            console.log("$(itm).find('td:eq(' + index + ')'):",$(itm))
                        });
                        $(config.el).parents('table').find('thead th:eq(' + index + ')').css({
                            'min-width': width,
                            'max-width': width,
                            width: width
                        });
                        if (config.callback) {
                            config.callback();
                        }
                        var postData = {
                            width: width,
                            columnKey: columnKey,
                            tableName: config.tableName
                        }
                        console.log('columnKey3',columnKey)
                        _.util.ajax_get('/table/updateTableWidth', postData, function(res) {
                            if (res.success && config.callBackSetWidth) {
                                config.callBackSetWidth(columnKey, width)
                            }
                        })
                        $(window).resize();
                    }
                    _createGrips(config);

                    $.each($('.dragging').parent().find('.JCLRgrip'), function(index, item) {
                        var left = 0;
                        for (var i = 0; i < index + 1; i++) {
                            left += $('.dragging').parents('.admin-table').find('.sticky-enabled tbody tr:eq(0) td:eq(' + i + ')').outerWidth();
                        }
                        $(item).css({
                            left: left
                        });
                    });
                    $('.dragging').removeClass('dragging');
                    $('.dragging-before').removeClass('dragging-before');
                    document.onmousedown = function() {
                        return true;
                    };
                    $(document).unbind('mousemove');
                    break;
                case 'mousemove':
                    if ($('.dragging').length) {
                        var left = e.clientX - $(config.el).offset().left;
                        $('.dragging').css({
                            left: left
                        });
                    }
                    break;
            }
        };
        $(config.el).parent().find('.JColResizer').on('mousedown', mouseEvent);
        $(config.el).parent().unbind('mouseup').on('mouseup', mouseEvent);
        $.each($('.admin-table').find('.sticky-enabled thead tr:last th'), function(index, item) {
            var width = $(item).outerWidth();
            $('.dragging').parents('.admin-table').find('.sticky-thead thead tr:last th:eq(' + index + ')').css({
                'min-width': width,
                'max-width': width,
                width: width
            });
        });
    };
    _createGrips(config);
};

使用：

//controlColumnWidthNew({
//		el: "#'表格id' tbody" 
//})
controlColumnWidthNew({
	el: '#document-operate-table tbody'   
})