JS层移支示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>课程安排</TITLE> <STYLE type=text/css>LABEL { CURSOR: hand; COLOR: lightblue; TEXT-DECORATION: underline } </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- //****************************************************************************************** //模块名称:拖动管理模块 //****************************************************************************************** var drag_objects=new Array(); //拖动对象集合 var drag_offsetX=0,drag_offsetY=0; var thisRegObj=null; //可以拖动的对象 function DragObject(element,minX,maxX,minY,maxY){ //属性 this.element=element; this.minX=minX; this.maxX=maxX; this.minY=minY; this.maxY=maxY; this.followObjects=new Array(); //事件处理函数 this.onDragBegin=null; this.onDragging=null; this.onDragEnd=null; //方法 this.addFollowObject=addDragFollowObject; } //伴随移动的对象 function FollowObject(element,offsetX,offsetY){ this.element=element; this.offsetX=offsetX; this.offsetY=offsetY; } //设置伴随移动的对象 function addDragFollowObject(element){ if (element==null) return; var fo=new FollowObject(element,0,0); this.followObjects[this.followObjects.length]=fo; } function cancelDrag(){ return(false); } //改变对象的布局方式为绝对位置 function setAbsolute(element){ //var x=element.offsetLeft,y=element.offsetTop; element.style.position="absolute"; //element.style.left=x; //element.style.top=y; } //注册拖动对象,如果成功就返回该对象 //element:Script对象 //minX,maxX:X方向的限制拖动范围,null表示不限制,相等表示不能拖动 //minY,maxY:Y方向的限制拖动范围,null表示不限制,相等表示不能拖动 function registerDrag(element,minX,maxX,minY,maxY){ if (element==null) return(null); if (getRegObj(element)!=null) return(null); //改变对象的布局方式 setAbsolute(element); //禁止对象拖放 element.ondragstart=cancelDrag; //注册对象 var obj=new DragObject(element,minX,maxX,minY,maxY); drag_objects[drag_objects.length]=obj; return(obj); } //取消注册 function unregDrag(element){ for (var i=0;i<drag_objects.length;i++){ if (element==drag_objects[i].element){ //drag_objects.splice(i,1); for(var j=i;j<drag_objects.length-1;j++) drag_objects[j]=drag_objects[j+1]; drag_objects.length--; return(true); } } return(false); } function drag_doDown(){ if (drag_orgMouseDownHandle!=null) drag_orgMouseDownHandle(); var obj=window.event.srcElement; if ((thisRegObj=getRegObj(obj))!=null){ drag_offsetX=window.event.x-obj.offsetLeft; drag_offsetY=window.event.y-obj.offsetTop; //记录伴随对象的位置 for (var i=0;i<thisRegObj.followObjects.length;i++){ var fo=thisRegObj.followObjects[i]; var pt=new Point(0,0); pt.clientToClient(fo.element,thisRegObj.element); fo.offsetX=pt.x; fo.offsetY=pt.y; } //调用事件处理函数 if (thisRegObj.onDragBegin!=null) { thisRegObj.onDragBegin(obj); } } } function drag_doMove(){ if (drag_orgMouseMoveHandle!=null) drag_orgMouseMoveHandle(); if (thisRegObj==null) return; if (window.event.button!=1) return; //移动对象X方向 if (thisRegObj.minX==null || thisRegObj.maxX==null){ thisRegObj.element.style.left=window.event.x-drag_offsetX; } else if(thisRegObj.minX==thisRegObj.maxX){ } else{ var nLeft=window.event.x-drag_offsetX; var nWidth=thisRegObj.element.offsetWidth; if (nLeft+nWidth>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; } //--> </SCRIPT> <META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD> <BODY onselectstart=return(false)> <SCRIPT language=JavaScript> 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; } </SCRIPT> <FONT style="FONT-SIZE: 12px; LEFT: 50px; WIDTH: 100px; POSITION: absolute; TOP: 43px; TEXT-ALIGN: center" color=blue>待排课程 <TABLE id=LeftTable style="LEFT: 50px; POSITION: absolute; TOP: 60px" cellSpacing=0 borderColorDark=white borderColorLight=black border=1> <TBODY> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> <TR> <TD width=100 height=12> </TD> </TR></TBODY></TABLE> <FONT style="FONT-SIZE: 12px; LEFT: 220px; WIDTH: 150px; POSITION: absolute; TOP: 43px; TEXT-ALIGN: center" color=blue>已排课程(上午) <TABLE id=RightTable style="LEFT: 220px; POSITION: absolute; TOP: 60px" cellSpacing=0 borderColorDark=white borderColorLight=black border=1> <TBODY> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> </TBODY></TABLE> <FONT style="FONT-SIZE: 12px; LEFT: 220px; WIDTH: 150px; POSITION: absolute; TOP: 153px; TEXT-ALIGN: center" color=blue>已排课程(下午) <TABLE id=Table2 style="LEFT: 220px; POSITION: absolute; TOP: 170px" cellSpacing=0 borderColorDark=white borderColorLight=black border=1> <TBODY> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> </TBODY></TABLE> <FONT style="FONT-SIZE: 12px; LEFT: 220px; WIDTH: 150px; POSITION: absolute; TOP: 263px; TEXT-ALIGN: center" color=blue>已排课程(晚上) <TABLE id=Table2 style="LEFT: 220px; POSITION: absolute; TOP: 280px" cellSpacing=0 borderColorDark=white borderColorLight=black border=1> <TBODY> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> <TR><TD width=150 height=20> </TD></TR> </TBODY></TABLE> 语文 <SCRIPT language=JavaScript> newObj=registerDrag(document.all("1")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(0).cells(0)); </SCRIPT> 数学 <SCRIPT language=JavaScript> newObj=registerDrag(document.all("2")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(1).cells(0)); </SCRIPT> 物理 <SCRIPT language=JavaScript> newObj=registerDrag(document.all("3")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(2).cells(0)); </SCRIPT> 化学 <SCRIPT language=JavaScript> newObj=registerDrag(document.all("4")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(3).cells(0)); </SCRIPT> 英语 <SCRIPT language=JavaScript> newObj=registerDrag(document.all("5")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(4).cells(0)); </SCRIPT> 政治 <SCRIPT language=JavaScript> newObj=registerDrag(document.all("6")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(5).cells(0)); </SCRIPT> <SCRIPT language=JavaScript> //重定位 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); } </SCRIPT> </BODY></HTML>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]