Web中DataGrid绑定数据显示列可拖动

核心提示：在原理主要是js代码将如下代码放在.aspx中<script language='javascript> //判定鼠标是否按下 var mouseDown = false; //鼠标所在区域 var IsTdArea=0; //鼠标按下 function MouseDown(obj) {if(IsT

在原理主要是js代码将如下代码放在.aspx中<script language='javascript> //判定鼠标是否按下
 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的列试试