表格可拖拉列改變列大小(使用的時候將youElement所有替換稱你要添加這個效果的元素,需是jqery的選擇器格式,如:$("table th/td"))

$(function () {    var isMouseDown = false;    var currentTh = null;    youElement.bind({        mousedown: function (e) {            var $th = $(this);            var left = $th.offset().left; //元素距左            var rightPos = left + $th.outerWidth();            if (rightPos - 4 <= e.pageX && e.pageX <= rightPos) {                isMouseDown = true;                currentTh = $th;                youElement.css('cursor', 'ew-resize');                //建立遮罩層,防止mouseup事件被其它元素阻止冒泡,致使mouseup事件沒法被body捕獲,致使拖動不能中止                var bodyWidth = $('body').width();                var bodyHeight = $('body').height();                $('body').append('<div id="mask" style="opacity:0;top:0px;left:0px;cursor:ew-resize;position:absolute;z-index:9999;width:' + bodyWidth + 'px;height:' + bodyHeight + 'px;"></div>');            }        }    });    $('body').bind({        mousemove: function (e) {            //移動到column右邊緣提示            youElement.each(function (index, eleDom) {                var ele = $(eleDom);                var left = ele.offset().left; //元素距左                var rightPos = left + ele.outerWidth();                if (rightPos - 4 <= e.pageX && e.pageX <= rightPos) { //移到列右邊緣                    ele.css('cursor', 'ew-resize');                } else {                    if (!isMouseDown) { //不是鼠標按下的時候取消特殊鼠標樣式                        ele.css("cursor", "auto");                    }                }            });            //改變大小            if (currentTh != null) {                if (isMouseDown) { //鼠標按下了,開始移動                    var left = currentTh.offset().left;                    var paddingBorderLen = currentTh.outerWidth() - currentTh.width();                    currentTh.width((e.pageX - left - paddingBorderLen) + 'px');                    var s = currentTh[0];                    while(s.tagName!="TABLE"){                        s=s.parentNode;                    }                    for (let i = 0; i <s.rows.length ; i++) {                        $(s.rows[i].cells[currentTh[0].cellIndex]).width((e.pageX - left - paddingBorderLen) + 'px');                    }                }            }        },        mouseup: function (e) {            isMouseDown = false;            currentTh = null;            youElement.css('cursor', 'auto');            $('#mask').remove();        }    });});
相關文章
相關標籤/搜索