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

在原理主要是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.Attributes.Add("onmouseover","MouseOverTD(this)");
      e.Item.Cells.Attributes.Add("onmousedown","MouseDown(this);");
      e.Item.Cells.Attributes.Add("onmousemove","MouseMove(this);");
      e.Item.Cells.Attributes.Add("onmouseup","MouseUp(this);");
     }
}


OK执行一下，鼠标拖动DataGrid的列试试