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

在原理主要是js代码将如下代码放在.ASPx中%26lt;script language='javascript%26gt;//判定鼠标是否按下
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%26gt;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%26gt;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 %26lt;=(event.x+1) %26amp;%26amp; objTD.offsetLeft %26gt;= (event.x-1))
{
//调整左边
IsTdArea = 1;
objTD.style.cursor =%26quot;w-resize%26quot;;
window.document.getElementById(%26quot;Table1%26quot;).style.cursor = %26quot;w-resize%26quot;;
}
else if((objTD.offsetLeft+objTD.offsetWidth) %26lt;= (event.x+1) %26amp;%26amp; (objTD.offsetLeft+objTD.offsetWidth) %26gt;= (event.x-1))
{
//调整右边
IsTdArea = 2;
objTD.style.cursor =%26quot;w-resize%26quot;;
}
else if(objTD.offsetTop %26lt;= (event.y+1) %26amp;%26amp; objTD.offsetTop %26gt;= (event.y-1))
{
//调整上边
IsTdArea = 3;
objTD.style.cursor =%26quot;s-resize%26quot;;
}
else if((objTD.offsetTop+objTD.offsetHeight) %26lt;= (event.y+1) %26amp;%26amp; (objTD.offsetTop+objTD.offsetHeight) %26gt;= (event.y-1))
{
//调整下边
IsTdArea = 4;
objTD.style.cursor =%26quot;s-resize%26quot;;
}
else
{
IsTdArea = 0;
objTD.style.cursor = %26quot;auto%26quot;;
}
}
}
%26lt;/script%26gt;在后台.cs中以下事件中写如下代码:private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
for(int i = 0; i %26lt; 3;i ++)
{
e.Item.Cells[i].Attributes.Add(%26quot;onmouseover%26quot;,%26quot;MouseOverTD(this)%26quot;);
e.Item.Cells[i].Attributes.Add(%26quot;onmousedown%26quot;,%26quot;MouseDown(this);%26quot;);
e.Item.Cells[i].Attributes.Add(%26quot;onmousemove%26quot;,%26quot;MouseMove(this);%26quot;);
e.Item.Cells[i].Attributes.Add(%26quot;onmouseup%26quot;,%26quot;MouseUp(this);%26quot;);
}
}OK执行一下，鼠标拖动DataGrid的列试试