用javascript能否实现表格的拖拽，象winform中那样

给个别人写的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>llrock </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*-----------------------------------
        by llrock,7/12/2002
------------------------------------*//***************** check brower **********************/
  function lib_bwcheck(){ //为了提高适用性，必须的除非你打算在一种浏览器中浏览
this.ver=navigator.appVersion;
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.win = (navigator.appVersion.indexOf("Win")>0);
    this.xwin = (navigator.appVersion.indexOf("X11")>0);
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5 || this.dom||false);
    this.width = null;
    this.height = null;
return this
}
  var bw = new lib_bwcheck();
/****************** class ********************/
function TExcel(name){
   this.name=name;
   this.records=new Array();
   this.fields=new Array();
   this.fields[0]=new TExcelItem(this,'field_0_0','序号',0,0,40,'#097EBD','#FFFFFF');
   this.records[0]=new Array();
   this.records[0][0]=this.fields[0];
   this.VResizer=new Array();

//default style...
this.width=80;
this.height=20;
this.bgcolor='#f7f7f7';   this.makeCode=makeCode;
   this.makeStyle=makeStyle;
   this.getObj=getObj;
   this.resizeToW=resizeToW;
   this.arrange=arrange;
   this.addField=addField;
   this.addRecord=addRecord;
}
function TExcelItem(owner,name,content,rID,fID,width,bgc,ftc){//type:row||col
   this.owner=owner;
   this.name=name;
   this.content=content;
   this.rID=rID;
   this.fID=fID;
    //default style...
this.width=width||owner.width;
this.height=owner.height;
this.bgcolor=bgc||owner.bgcolor;
this.fontcolor=ftc||'#000000';
   this.getObj=item_getObj;
   this.makeStyle=item_makeStyle;
   this.makeCode=item_makeCode;
}
/********************** method ************************/
function item_makeStyle(){
  this.csscode='position:absolute;width:'+this.owner.fields[this.fID].width+'px;height:'+this.height+'px;left:1px;top:0px;background-color:'+this.bgcolor+';overflow:hidden;z-index:10;font-family:tahoma, arial,helvetica;font-size:12px;color:'+this.fontcolor;
}
function item_makeCode(){
    if(this.rID==0)this.htmlcode='\n<div id="'+this.name+'" style="'+this.csscode+'" ><center><b>'+this.content+'</b></center></div>';
else this.htmlcode='\n<div id="'+this.name+'" style="'+this.csscode+'" CONTENTEDITABLE="true" cursor="text">'+this.content+'</div>';//如果你不希望用户可以修改信息把ContentEditable设为false
}
function item_getObj(){
   this.body=new makeLayer(this.name);
   this.body.width=this.width;
   this.body.height=this.height;
}
function makeCode(){
   this.htmlcode='';
   for(i=0;i<this.records.length;i++)
       for(j=0;j<this.fields.length;j++){
      this.records[i][j].makeCode()
          this.htmlcode+=this.records[i][j].htmlcode;
   }
   for(i=0;i<(this.fields.length-1);i++)
       this.htmlcode+='\n<div id="VResizer_'+i+'" style="position:absolute;width:1px;height:100%;top:0px;background-color:black;cursor:e-resize;z-index:15;overflow:hidden;" ></div>';
       this.htmlcode='<div id=panel style="position:absolute;background-color:black;width:330px;height:200px;left:100px;top:100px;overflow:hidden;">'+this.htmlcode+'</div>'


}
function makeStyle(){
   this.csscode='';
   for(i=0;i<this.records.length;i++)
       for(j=0;j<this.fields.length;j++){
      this.records[i][j].makeStyle()
          this.csscode+=this.records[i][j].csscode;
   }
}
function getObj(){
   for(i=0;i<this.records.length;i++)
       for(j=0;j<this.fields.length;j++){
           this.records[i][j].getObj();
       }
for(i=0;i<(this.fields.length-1);i++)
     this.VResizer[this.VResizer.length]=new makeLayer('VResizer_'+i);
}
function arrange(){
    var pw=0
   for(j=0;j<this.fields.length;j++){
        this.fields[j].x=j==0?1:(this.fields[j-1].x+this.fields[j-1].width+1);
if(j!=(this.fields.length-1))this.VResizer[j].moveTo((this.fields[j].x+this.fields[j].width),0);
        pw+=1+this.fields[j].width;
for(i=0;i<this.records.length;i++){
   var y=i*21+this.records[i][j].body.x;
           this.records[i][j].body.moveTo(this.fields[j].x,y)
        }
}
   document.all.panel.style.width=pw+1;
   document.all.panel.style.height=21*this.records.length+1}
function addField(){
   var arg=this.addField.arguments;
   var len=arg.length;
//  this.records[0]=new Array();
   var rID=0;
   this.records[0][0]=new TExcelItem(this,'field_0_0','',0,0);
   for(i=0;i<len;i++){
     var fID=this.fields.length;
this.fields[fID]=new TExcelItem(this,('field_'+rID+'_'+fID),(arg[i]==''?('unName_'+rID+'_'+fID):arg[i]),rID,fID,100,'#097EBD','#FFFFFF');
this.records[0][this.records[0].length]=this.fields[fID];
   }
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

function addRecord(){
   var arg=this.addRecord.arguments;
   var rID=this.records.length;
   this.records[rID]=new Array();
   this.records[rID][0]=new TExcelItem(this,('item_'+rID+'_0'),rID,rID,0);
   for(i=1;i<this.fields.length;i++){
       this.records[rID][i]=new TExcelItem(this,('item_'+rID+'_'+i),(!arg[i-1]?'':arg[i-1]),rID,i);
   }
  // alert(this.fields.length)
}
/***************** drag function *****************************/
function resizeToW(w){
   for(i=0;i<this.records.length;i++){
       this.records[i][dragID].body.css.width=w;
   this.records[i][dragID+1].body.css.width=allw-w;
   this.VResizer[dragID].moveTo(w+ oExcel.records[0][dragID].body.obj.offsetLeft,0);
   this.records[i][dragID+1].body.moveTo(this.VResizer[dragID].obj.offsetLeft+1,0);
   }
}
var dragObj=null;
var dragID=null;
var allw,maxw,x1,x2
function mDown(){
   if(window.event.srcElement.id.indexOf('VResizer_')!=-1)dragObj=window.event.srcElement;
   else return false;
   document.body.style.cursor='e-resize';
   dragID=parseInt(dragObj.id.replace(/\w+\_(\d*)/,'$1'));
   allw=oExcel.records[0][dragID].body.obj.clientWidth+oExcel.records[0][dragID+1].body.obj.clientWidth;
   maxw=allw-20;
   x1=oExcel.records[0][dragID].body.obj.offsetLeft+20+document.all.panel.offsetLeft;
   x2=oExcel.records[0][dragID+1].body.obj.offsetLeft+document.all.panel.offsetLeft+oExcel.records[0][dragID+1].body.obj.clientWidth-20;
   return false
}
function mMove(){
   if(!dragObj||!dragID) return false;
   if(window.event.x<=x1) return oExcel.resizeToW(20);
   if(window.event.x>=x2) return oExcel.resizeToW(maxw);
   var w=window.event.x-document.all.panel.offsetLeft-oExcel.records[0][dragID].body.obj.offsetLeft//-window.event.offsetX;
   return oExcel.resizeToW(w)}
function mUp(){
   document.body.style.cursor='default';
   dragObj=null;
   dragID=null;
   return false
}
function dragInit(){
if (bw.ns) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}else{
   document.onmousedown = mDown
   document.onmousemove = mMove
   document.onmouseup = mUp;
}
}
/************* layer function ******************/
function makeLayer( idStr ) {
this.idStr = idStr;
if(bw.ns4)this.obj=document.layers[idStr];
else if (bw.ns6) this.obj = document.getElementById(idStr);
else this.obj=eval('document.all.'+idStr);
if (bw.ns6) this.css=this.obj.style;
else if (bw.ns) this.css=this.obj;
else this.css=this.obj.style;
this.x = getLayerX(this.idStr);
this.y = getLayerY(this.idStr);
this.moveTo=lib_moveTo;
return (this);
}
function lib_moveTo(x,y){
    this.x=x!=''?x:this.x;
this.y=y!=''?y:this.y;
this.css.left=this.x;
this.css.top=this.y
}
function getLayerX( ID ) {
   if (bw.ns6) return(parseInt(document.getElementById(ID).style.left));
   else if (bw.ns) return(document.layers[ID].left);
   else return(document.all[ID].offsetLeft);
}
function getLayerY( ID ) {
if (bw.ns6) return(parseInt(document.getElementById(ID).style.top));
else if (bw.ns) return(document.layers[ID].top);
else return(document.all[ID].offsetTop);
}
//-->
</SCRIPT>
</HEAD><BODY onload="dragInit()">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>