JS层移支示例代码
作者：百宝袋时间：2026-10-30 05:24:28浏览：182
本文提供一段JS层移支示例代码，演示如何通过JavaScript实现简单的拖拽排序功能。代码包含基本的HTML结构和CSS样式，用于展示待排课程列表，并通过JavaScript处理拖拽事件，实现课程项的重新排序。
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> <META content="MSHTML 5.50.4134.600" name=GENERATOR></HEAD> <BODY onselectstart=return(false)> <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> <DIV id=2 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px" align=center>数学</DIV> <DIV id=3 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px" align=center>物理</DIV> <DIV id=4 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px" align=center>化学</DIV> <DIV id=5 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px" align=center>英语</DIV> <DIV id=6 style="WIDTH: 100px; CURSOR: hand; POSITION: absolute; HEIGHT: 12px" align=center>政治</DIV> </BODY></HTML> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
作者最新文章
定制 Quill.js 主题样式：修改默认 CSS 与添加自定义类名
2026-11-04 11:21:35
混淆JS代码怎么在线反混淆并格式化阅读
2026-11-03 21:46:39
JS在线编辑器代码报错怎么调试？控制台使用技巧
2026-11-03 21:24:56
从 marked.js 旧版本升级到最新版：API 变更与迁移指南
2026-11-03 17:38:17
JS富文本编辑器Quill与代码编辑器CodeMirror的区别及应用场景
2026-11-03 16:52:09