$(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(); } });});