在原理主要是js代码 将如下代码放在.aspx中 <script language='java script> //判断鼠标是否按下 var mouseDown = false; //鼠标所在区域 var IsTdArea=0; //鼠标按下 function MouseDown(obj) { if(IsTdArea != 0) { obj.mouseDownY = event.clientY; obj.mouseDownX=event.clientX; obj.parentTdH = obj.offsetHeight; obj.pareneTdW=obj.offsetWidth; //获得table的高度 obj.pareneTableH=obj.parentElement.parentElement.parentElement.offsetHeight; //获得table的宽度 obj.pareneTableW=obj.parentElement.parentElement.parentElement.offsetWidth; obj.setCapture(); mouseDown = true; } else { mouseDown = false; } } function MouseMove(obj) { if(mouseDown == true) { if(IsTdArea == 1 || IsTdArea == 2) { if(!obj.mouseDownX) return false; var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX; if(newWidth>0) { obj.style.width = newWidth; obj.parentElement.parentElement.parentElement.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX; } } else if(IsTdArea ==3 || IsTdArea == 4) { if(!obj.mouseDownY) return false; var newHeight=obj.pareneTdH*1+event.clientY*1-obj.mouseDownY; if(newHeight>0) { obj.style.Height = newHeight; obj.parentElement.parentElement.parentElement.style.Height=obj.pareneTableH*1+event.clientY*1-obj.mouseDownY; } } } else { MouseOverTD(obj); } } function MouseUp(obj) { if(mouseDown == true) { obj.releaseCapture(); obj.mouseDownY = 0; obj.mouseDownX=0; mouseDown = false; IsTdArea=0; } else { mouseDown = false; IsTdArea=0; } } function MouseOverTD(objchild) { var objTD = objchild; if(mouseDown == false) { //获得TD所属的Table var tbab = objTD.parentElement.parentElement.parentElement; //获得Table的左边坐标值 var tbOffSetLeft =tbab.offsetLeft; if(objTD.offsetLeft <=(event.x+1) && objTD.offsetLeft >= (event.x-1)) { //调整左边 IsTdArea = 1; objTD.style.cursor ="w-resize"; window.document.getElementById("Table1").style.cursor = "w-resize"; } else if((objTD.offsetLeft+objTD.offsetWidth) <= (event.x+1) && (objTD.offsetLeft+objTD.offsetWidth) >= (event.x-1)) { //调整右边 IsTdArea = 2; objTD.style.cursor ="w-resize"; } else if(objTD.offsetTop <= (event.y+1) && objTD.offsetTop >= (event.y-1)) { //调整上边 IsTdArea = 3; objTD.style.cursor ="s-resize"; } else if((objTD.offsetTop+objTD.offsetHeight) <= (event.y+1) && (objTD.offsetTop+objTD.offsetHeight) >= (event.y-1)) { //调整下边 IsTdArea = 4; objTD.style.cursor ="s-resize"; } else { IsTdArea = 0; objTD.style.cursor = "auto"; } } } </script> 在后台.cs中以下事件中写如下代码: private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { for(int i = 0; i < 3;i ++) { e.Item.Cells[i].Attributes.Add("onmouseover","MouseOverTD(this)"); e.Item.Cells[i].Attributes.Add("onmousedown","MouseDown(this);"); e.Item.Cells[i].Attributes.Add("onmousemove","MouseMove(this);"); e.Item.Cells[i].Attributes.Add("onmouseup","MouseUp(this);"); } } OK执行一下,鼠标拖动DataGrid的列试试 |