JS层移支示例代码_javascript技巧

来源：步遥情感网

<HTML><HEAD><TITLE>课程安排</TITLE> 
<STYLE type=text/css>LABEL { 
 CURSOR: hand; COLOR: lightblue; TEXT-DECORATION: underline 
} 
</STYLE>

thisRegObj.maxX) nLeft=thisRegObj.maxX-nWidth; 
 if (nLeft<thisRegObj.minX) nLeft=thisRegObj.minX; 
 thisRegObj.element.style.left=nLeft; 
 } 
 //移动对象y方向 
 if (thisRegObj.minY==null || thisRegObj.maxY==null){ 
 thisRegObj.element.style.top=window.event.y-drag_offsetY; 
 } 
 else if(thisRegObj.minY==thisRegObj.maxY){ 
 } 
 else{ 
 var nTop=window.event.y-drag_offsetY; 
 var nHeight=thisRegObj.element.offsetHeight; 
 if (nTop+nHeight>thisRegObj.maxY) nTop=thisRegObj.maxY-nHeight; 
 if (nTop<thisRegObj.minY) nTop=thisRegObj.minY; 
 thisRegObj.element.style.top=nTop; 
 } 
 //移动伴随对象 
 for (var i=0;i<thisRegObj.followObjects.length;i++){ 
 var fo=thisRegObj.followObjects[i]; 
 absoluteMove(fo.element,thisRegObj.element,fo.offsetX,fo.offsetY); 
 } 
 //调用事件处理函数 
 if (thisRegObj.onDragging!=null) { 
 thisRegObj.onDragging(thisRegObj.element); 
 } 
}

function drag_doUp(){ 
 if (drag_orgMouseUpHandle!=null) drag_orgMouseUpHandle(); 
 if (thisRegObj==null) return; 
 
 //调用事件处理函数 
 if (thisRegObj.onDragEnd!=null) { 
 thisRegObj.onDragEnd(thisRegObj.element); 
 } 
 thisRegObj=null; 
}

function getRegObj(obj){ 
 for (var i=0;i<drag_objects.length;i++){ 
 if (obj==drag_objects[i].element) return(drag_objects[i]); 
 } 
 return(null); 
}

//挂钩处理消息函数 
var drag_orgMouseMoveHandle=document.onmousemove; 
document.onmousemove=drag_doMove; 
var drag_orgMouseDownHandle=document.onmousedown; 
document.onmousedown=drag_doDown; 
var drag_orgMouseUpHandle=document.onmouseup; 
document.onmouseup=drag_doUp;

//****************************************************************************************** 
//模块名称:坐标转换对象 
//******************************************************************************************

//Point对象 
function Point(x,y){ 
 //属性 
 this.x=x; 
 this.y=y; 
 //方法 
 this.clientToScreen=clientToScreen; 
 this.screenToClient=screenToClient; 
 this.clientToClient=clientToClient; 
}

//客户区坐标转换为屏幕(BODY)坐标 
function clientToScreen(srcElement){ 
 var offsetParent=srcElement; 
 //alert(this.x+" "+this.y); 
 while(offsetParent!=null && offsetParent.tagName.toUpperCase()!="BODY"){ 
 this.x+=offsetParent.offsetLeft; 
 this.y+=offsetParent.offsetTop; 
 offsetParent=offsetParent.offsetParent; 
 //alert(this.x+" "+this.y); 
 } 
}

//屏幕(BODY)坐标转换为客户区坐标 
function screenToClient(dstElement){ 
 var offsetParent=dstElement; 
 while(offsetParent!=null && offsetParent.tagName.toUpperCase()!="BODY"){ 
 this.x-=offsetParent.offsetLeft; 
 this.y-=offsetParent.offsetTop; 
 offsetParent=offsetParent.offsetParent; 
 } 
}

//客户区(src)坐标转换为客户区(dst)坐标 
function clientToClient(srcElement,dstElement){ 
 this.clientToScreen(srcElement); 
 this.screenToClient(dstElement); 
}

//把srcElement移动到dstElement的(x,y)处 
function absoluteMove(srcElement,dstElement,x,y){ 
 if (x==null) x=0; 
 if (y==null) y=0; 
 var pt=new Point(x,y); 
 pt.clientToClient(dstElement,srcElement.offsetParent); 
 srcElement.style.pixelLeft=pt.x; 
 srcElement.style.pixelTop=pt.y; 
} 
//-->

<META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD> 
<BODY onselectstart=return(false)> 
 
 var newObj=null; 
 DragObject.prototype.bind=bindToCell; 
 
 //把拖动元素绑定到单元格 
 function bindToCell(cell){ 
 if (cell==null) return; 
 this.cell=cell; 
 absoluteMove(this.element,cell,(cell.offsetWidth-this.element.offsetWidth)/2,(cell.offsetHeight-this.element.offsetHeight)/2); 
 }

//当完成拖动后,调整位置 
 function finishDrag(element){ 
 var dragObj=getRegObj(element); 
 if (dragObj==null) return; 
 //按中点来计算位置 
 var pt=new Point(element.offsetWidth/2,element.offsetHeight/2); 
 pt.clientToScreen(element); 
 var oldZIndex=element.style.zIndex; 
 element.style.zIndex=-1000; 
 var cell=document.elementFromPoint(pt.x-document.body.scrollLeft,pt.y-document.body.scrollTop); 
 //拖动是否有效 
 if (cell!=null){ 
 if (cell.tagName=="TD"){ 
 //如果放在单元格上,就进行调整 
 var anotherDragObj=getDragObjectByCell(cell); 
 if (anotherDragObj==null){ 
 dragObj.bind(cell); 
 } 
 else{ 
 //交换 
 anotherDragObj.bind(dragObj.cell); 
 dragObj.bind(cell); 
 } 
 } 
 else{ 
 //如果不是放在单元格上,要查看是否属于DIV 
 var div=getParent(cell,"DIV"); 
 if (div!=null){ 
 var anotherDragObj=getRegObj(div); 
 if (anotherDragObj!=null){ 
 //如果是另一个DragObject,就交换 
 var c=anotherDragObj.cell; 
 anotherDragObj.bind(dragObj.cell); 
 dragObj.bind(c); 
 } 
 else{ 
 dragObj.bind(dragObj.cell); 
 } 
 } 
 else{ 
 dragObj.bind(dragObj.cell); 
 } 
 } 
 } 
 else{ 
 //如果不是单元格,就还原 
 dragObj.bind(dragObj.cell); 
 } 
 element.style.zIndex=oldZIndex; 
 }

语文 
 
 newObj=registerDrag(document.all("1")); 
 newObj.onDragEnd=finishDrag; 
 newObj.bind(document.all("LeftTable").rows(0).cells(0));

数学 
 
 newObj=registerDrag(document.all("2")); 
 newObj.onDragEnd=finishDrag; 
 newObj.bind(document.all("LeftTable").rows(1).cells(0));

物理 
 
 newObj=registerDrag(document.all("3")); 
 newObj.onDragEnd=finishDrag; 
 newObj.bind(document.all("LeftTable").rows(2).cells(0));

化学 
 
 newObj=registerDrag(document.all("4")); 
 newObj.onDragEnd=finishDrag; 
 newObj.bind(document.all("LeftTable").rows(3).cells(0));

英语 
 
 newObj=registerDrag(document.all("5")); 
 newObj.onDragEnd=finishDrag; 
 newObj.bind(document.all("LeftTable").rows(4).cells(0));

政治 
 
 newObj=registerDrag(document.all("6")); 
 newObj.onDragEnd=finishDrag; 
 newObj.bind(document.all("LeftTable").rows(5).cells(0));

//重定位 
 function relocate(){ 
 for (var i=0;i<drag_objects.length;i++){ 
 drag_objects[i].bind(drag_objects[i].cell); 
 } 
 } 
 
 //提交到服务器 
 function saveChange(){ 
 var lngOrder,lngModuleID; 
 var table=document.all("RightTable"); 
 var lngIndex=0; 
 var strAction=""; 
 
 for (var i=0;i<table.rows.length;i++){ 
 var row=table.rows(i); 
 for (var j=0;j<row.cells.length;j++){ 
 var cell=row.cells(j); 
 var dragObj=getDragObjectByCell(cell); 
 if (dragObj!=null){ 
 lngOrder=i*row.cells.length+j; 
 lngModuleID=dragObj.element.id; 
 if (strAction=="") 
 strAction="?MID"+lngIndex+"="+lngModuleID+"&OR"+lngIndex+"="+lngOrder; 
 else 
 strAction=strAction+"&MID"+lngIndex+"="+lngModuleID+"&OR"+lngIndex+"="+lngOrder; 
 lngIndex++; 
 } 
 } 
 } 
 if (lngIndex>0) strAction=strAction+"&count="+lngIndex; 
 strAction="MainPageCenter.jsp"+strAction; 
 window.location.href=strAction; 
 } 
 
 //根据绑定的Cell来得到DragObject 
 function getDragObjectByCell(cell){ 
 for (var i=0;i<drag_objects.length;i++){ 
 if (cell==drag_objects[i].cell) return(drag_objects[i]); 
 } 
 return(null); 
 }

//得到指定类型的父对象 
 function getParent(objChild,strParentType){ 
 var objParent=objChild; 
 
 if (strParentType==null || objChild==null) return(null); 
 strParentType=strParentType+""; 
 while (objParent!=null && objParent.tagName.toUpperCase()!=strParentType.toUpperCase()){ 
 //alert(objParent.tagName); 
 objParent=objParent.parentElement; 
 } 
 return(objParent); 
 } 
 
 
</BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部频道

JS层移支示例代码_javascript技巧