JS层移支示例代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS层移支示例代码

Javascript: Javascript实例教程(12) 隐藏script代码; Javascript实例教程(11) 创建\"后退\"按钮; HTC：浏览器上的舞者; JavaScript 小技巧(第四集); Javascript实例教程(20) 使用HoTMetal(7); 点一下，首页地址添加到收藏夹(javascript); Javascript设计漫天雪花; Javascript实例教程(21) OLE Automation(2); Javascript实例教程(20) 使用HoTMetal(3); Javascript制作闪烁的边框; JavaScript对象与数组参考大全; Javascript实例教程(21) OLE Automation(3); 利用JavaScript制作倒计时牌; Javascript实例教程(5) 利用Javascript创建对象; 利用JAVASCRIPT制作简单动画; Javascript实例教程(15) JS代替CGI; Javascript实例教程(19) 数组; JavaScript[对象.属性]集锦之三; Javascript实例教程(21) OLE Automation(6); JavaScript 小技巧(第一集)

No. « ‹ 9 10 11 12 › »

技术文章搜索

关键字

Javascript 中的 JS层移支示例代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 136 ::

收藏到网摘: n/a

(function(){})()的用法与优点如何在Web页面上直接打开、编辑、创建Office文档

点击运行可以看到效果:

<!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">
</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>
<DIV id=1 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"
align=center>语文</DIV>
<SCRIPT language=JavaScript> newObj=registerDrag(document.all("1")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(0).cells(0)); </SCRIPT>
<DIV id=2 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"
align=center>数学</DIV>
<SCRIPT language=JavaScript> newObj=registerDrag(document.all("2")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(1).cells(0)); </SCRIPT>
<DIV id=3 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"
align=center>物理</DIV>
<SCRIPT language=JavaScript> newObj=registerDrag(document.all("3")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(2).cells(0)); </SCRIPT>
<DIV id=4 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"
align=center>化学</DIV>
<SCRIPT language=JavaScript> newObj=registerDrag(document.all("4")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(3).cells(0)); </SCRIPT>
<DIV id=5 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"
align=center>英语</DIV>
<SCRIPT language=JavaScript> newObj=registerDrag(document.all("5")); newObj.onDragEnd=finishDrag; newObj.bind(document.all("LeftTable").rows(4).cells(0)); </SCRIPT>
<DIV id=6 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px"
align=center>政治</DIV>
<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 全选提示:你可先修改部分代码,再按运行]

(function(){})()的用法与优点如何在Web页面上直接打开、编辑、创建Office文档

Javascript 中的 JS层移支示例代码

评论 (0) All