|
@@ -0,0 +1,318 @@
|
|
|
|
|
+<HTML>
|
|
|
|
|
+<HEAD>
|
|
|
|
|
+ <META http-equiv="Content-Type" content="text/html; charset=gb2312">
|
|
|
|
|
+ <TITLE>JS 动态拖动表格实现</TITLE>
|
|
|
|
|
+ <STYLE>
|
|
|
|
|
+ td {
|
|
|
|
|
+ width: 20%;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ border-bottom: 1px solid black;
|
|
|
|
|
+ border-right: 1px solid black;
|
|
|
|
|
+ cursor: default;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ div {
|
|
|
|
|
+ font-size: 25px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ th {
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ border-bottom: 2px solid black;
|
|
|
|
|
+ background-color: #CCCCCC
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ table {
|
|
|
|
|
+ border: 1px solid black;
|
|
|
|
|
+ font-size: 17px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ </STYLE>
|
|
|
|
|
+ <script language="javascript">
|
|
|
|
|
+ /************************************ dragedTableData.js *******************************/
|
|
|
|
|
+ /*一个对表格进行拖拽来交换单元格数据的脚本
|
|
|
|
|
+ * 可以实现表格内容的内部拖动
|
|
|
|
|
+ * 确保中间过渡层的存在，id为指定
|
|
|
|
|
+ * 功能实现：兼容火狐
|
|
|
|
|
+ * 解决问题：
|
|
|
|
|
+ * 1.event的获取
|
|
|
|
|
+ * 2.event的event.srcElement ? event.srcElement: event.target;
|
|
|
|
|
+ * 3.Table.cells不兼容火狐 改用遍历rows再遍历cells
|
|
|
|
|
+ * 4.event的横纵标和纵坐标的获取。var x=event.x||event.pageX; var y=event.y||event.pageY;
|
|
|
|
|
+ * 5.document.all改成document.getElementById
|
|
|
|
|
+ */
|
|
|
|
|
+ /*--------全局变量-----------*/
|
|
|
|
|
+ var dragedTable_x0, dragedTable_y0, dragedTable_x1, dragedTable_y1; // 原来td的横坐标、纵坐标，按下鼠标时的鼠标位置（横坐标、纵坐标）
|
|
|
|
|
+ var dragedTable_movable = false; // 标识没有td在移动
|
|
|
|
|
+ var dragedTable_preCell = null; // 为后面让起始单元格（原td）赋值
|
|
|
|
|
+ var dragedTable_normalColor = null;
|
|
|
|
|
+ //起始单元格的颜色
|
|
|
|
|
+ var dragedTable_preColor = "lavender";//淡紫色
|
|
|
|
|
+ //目标单元格的颜色
|
|
|
|
|
+ var dragedTable_endColor = "#FFCCFF";//粉红色
|
|
|
|
|
+ var dragedTable_movedDiv = "dragedTable_movedDiv";
|
|
|
|
|
+ var dragedTable_tableId = "";
|
|
|
|
|
+ var flag = true;
|
|
|
|
|
+
|
|
|
|
|
+ /*--------全局变量-----------*/
|
|
|
|
|
+ function DragedTable(tableId) {
|
|
|
|
|
+ // 新建一个过渡div且显示为none，按下鼠标后，过渡div显示，且起始单元格变为淡紫色
|
|
|
|
|
+ dragedTable_tableId = tableId;
|
|
|
|
|
+ var oTempDiv = document.createElement("div");
|
|
|
|
|
+ oTempDiv.id = dragedTable_movedDiv;
|
|
|
|
|
+ // 禁止拖放
|
|
|
|
|
+ oTempDiv.onselectstart = function () {
|
|
|
|
|
+ return false
|
|
|
|
|
+ };
|
|
|
|
|
+ oTempDiv.style.cursor = "hand";
|
|
|
|
|
+ oTempDiv.style.position = "absolute";
|
|
|
|
|
+ oTempDiv.style.border = "1px solid black";
|
|
|
|
|
+ oTempDiv.style.backgroundColor = dragedTable_endColor;
|
|
|
|
|
+ // 元素不会被显示
|
|
|
|
|
+ oTempDiv.style.display = "none";
|
|
|
|
|
+ // 向body中插入一个DOM元素：oTempDiv
|
|
|
|
|
+ document.body.appendChild(oTempDiv);
|
|
|
|
|
+ document.getElementById(tableId).onmousedown = showDiv;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 获得事件Event对象，用于兼容IE和FireFox
|
|
|
|
|
+ function getEvent() {
|
|
|
|
|
+ return window.event || arguments.callee.caller.arguments[0];
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //得到控件的绝对位置
|
|
|
|
|
+ function getPos(cell) {
|
|
|
|
|
+ var pos = new Array();
|
|
|
|
|
+ var t = cell.offsetTop;
|
|
|
|
|
+ var l = cell.offsetLeft;
|
|
|
|
|
+ while (cell = cell.offsetParent) {
|
|
|
|
|
+ t += cell.offsetTop;
|
|
|
|
|
+ l += cell.offsetLeft;
|
|
|
|
|
+ }
|
|
|
|
|
+ pos[0] = t; // 纵坐标
|
|
|
|
|
+ pos[1] = l; // 横坐标
|
|
|
|
|
+ return pos;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 显示临时图层
|
|
|
|
|
+ function showDiv() {
|
|
|
|
|
+ var event = getEvent();
|
|
|
|
|
+ // 得到触发该事件的对象,也就是对触发该事件对象的一个引用
|
|
|
|
|
+ var obj = event.srcElement ? event.srcElement : event.target;
|
|
|
|
|
+ // 定义一个数组用来存放位置参数
|
|
|
|
|
+ var pos = new Array();
|
|
|
|
|
+ // 获取过渡div
|
|
|
|
|
+ var oDiv = document.getElementById(dragedTable_movedDiv);
|
|
|
|
|
+ if (obj.tagName.toLowerCase() == "td") {
|
|
|
|
|
+ obj.style.cursor = "hand";
|
|
|
|
|
+ pos = getPos(obj);
|
|
|
|
|
+ // 计算中间过渡层位置，赋值
|
|
|
|
|
+ oDiv.style.width = obj.offsetWidth; // 得到td的宽,赋值给临时层oDiv
|
|
|
|
|
+ oDiv.style.height = obj.offsetHeight; // 得到td的高,赋值给临时层oDiv
|
|
|
|
|
+ oDiv.style.top = pos[0]; // 得到该td的纵坐标的位置,赋值给临时层oDiv
|
|
|
|
|
+ oDiv.style.left = pos[1]; // 得到该td的横坐标的位置,赋值给临时层oDiv
|
|
|
|
|
+ oDiv.innerHTML = obj.innerHTML; //得到该td的文本显示内容,赋值给临时层oDiv
|
|
|
|
|
+ oDiv.style.display = ""; // 显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个粉色的框框
|
|
|
|
|
+ dragedTable_x0 = pos[1]; // 该原td的横坐标
|
|
|
|
|
+ dragedTable_y0 = pos[0]; // 该原td的纵坐标
|
|
|
|
|
+ dragedTable_x1 = event.clientX; // 返回当前按下鼠标所在位置的横坐标
|
|
|
|
|
+ dragedTable_y1 = event.clientY; // 返回当前按下鼠标所在位置的纵坐标
|
|
|
|
|
+ //记住原td
|
|
|
|
|
+ dragedTable_normalColor = obj.style.backgroundColor; // 得到触发该事件对象的背景色
|
|
|
|
|
+ obj.style.backgroundColor = dragedTable_preColor;//起始单元格颜色为淡紫
|
|
|
|
|
+ dragedTable_preCell = obj; //起始单元格 赋值给另外一个空对象(属公共的变量)
|
|
|
|
|
+ dragedTable_movable = true; // 标识有td在移动
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 当拖动一个td时,经过其他td时所处理的事件
|
|
|
|
|
+ function dragDiv() {
|
|
|
|
|
+ // 移动过渡div，当过渡div移动到某个单元格之上，那个单元格变色成粉红色。
|
|
|
|
|
+ if (dragedTable_movable) { // 当上面的showDiv事件为真时,执行下面的代码
|
|
|
|
|
+ var event = getEvent();
|
|
|
|
|
+ // 获取过渡div
|
|
|
|
|
+ var oDiv = document.getElementById(dragedTable_movedDiv);
|
|
|
|
|
+ var pos = new Array();
|
|
|
|
|
+ var x = event.x || event.pageX;
|
|
|
|
|
+ var y = event.y || event.pageY;
|
|
|
|
|
+ var posX = 0;
|
|
|
|
|
+ var posY = 0;
|
|
|
|
|
+ var td;
|
|
|
|
|
+ // 获取起始table
|
|
|
|
|
+ var oTable = document.getElementById(dragedTable_tableId);
|
|
|
|
|
+ var rowslength = oTable.rows.length; // 显示table中行的数目
|
|
|
|
|
+ var cellslength = 0;
|
|
|
|
|
+ oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0; // 定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标
|
|
|
|
|
+ oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0; // 定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标
|
|
|
|
|
+ for (var j = 1; j < rowslength; j++) {
|
|
|
|
|
+ cellslength = oTable.rows[j].cells.length;
|
|
|
|
|
+ for (var i = 0; i < cellslength; i++) {
|
|
|
|
|
+ td = oTable.rows[j].cells[i];
|
|
|
|
|
+ if (td.tagName.toLowerCase() == "td") {
|
|
|
|
|
+ pos = getPos(td);
|
|
|
|
|
+ posX = pos[1];
|
|
|
|
|
+ posY = pos[0];
|
|
|
|
|
+ //计算鼠标位置，是否在某个单元格的范围之内
|
|
|
|
|
+ if (x > posX && x < posX + td.offsetWidth && y > posY && y < posY + td.offsetHeight) {
|
|
|
|
|
+ if (td != dragedTable_preCell) td.style.backgroundColor = dragedTable_endColor;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ if (td != dragedTable_preCell) td.style.backgroundColor = dragedTable_normalColor;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // 覆盖图层
|
|
|
|
|
+ function hideDiv() {
|
|
|
|
|
+ if (dragedTable_movable) {
|
|
|
|
|
+ var event = getEvent();
|
|
|
|
|
+ var x = event.x || event.pageX;
|
|
|
|
|
+ var y = event.y || event.pageY;
|
|
|
|
|
+ // 获取table
|
|
|
|
|
+ var oTable = document.getElementById(dragedTable_tableId);
|
|
|
|
|
+ var pos = new Array();
|
|
|
|
|
+ var posX = 0;
|
|
|
|
|
+ var posY = 0;
|
|
|
|
|
+ var td;
|
|
|
|
|
+ var rowslength = oTable.rows.length;
|
|
|
|
|
+ var cellslength = 0;
|
|
|
|
|
+
|
|
|
|
|
+ if (dragedTable_preCell != null) {
|
|
|
|
|
+ for (var j = 1; j < rowslength; j++) {
|
|
|
|
|
+ cellslength = oTable.rows[j].cells.length;
|
|
|
|
|
+ for (var i = 0; i < cellslength; i++) {
|
|
|
|
|
+ td = oTable.rows[j].cells[i];
|
|
|
|
|
+ pos = getPos(td);
|
|
|
|
|
+ posX = pos[1];
|
|
|
|
|
+ posY = pos[0];
|
|
|
|
|
+ //计算鼠标位置，是否在某个单元格的范围之内
|
|
|
|
|
+ if (x > posX && x < posX + td.offsetWidth && y > posY && y < posY + td.offsetHeight) {
|
|
|
|
|
+ if (oTable.rows[j].cells[i].tagName.toLowerCase() == "td") {
|
|
|
|
|
+ if (flag) {
|
|
|
|
|
+ //交换文本
|
|
|
|
|
+ dragedTable_preCell.innerHTML = td.innerHTML;
|
|
|
|
|
+ td.innerHTML = document.getElementById(dragedTable_movedDiv).innerHTML;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!flag) {
|
|
|
|
|
+ td.innerHTML = document.getElementById(dragedTable_movedDiv).innerHTML;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //清除原单元格和目标单元格的样式
|
|
|
|
|
+ dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
|
|
|
|
|
+ td.style.backgroundColor = dragedTable_normalColor;
|
|
|
|
|
+ td.style.cursor = "";
|
|
|
|
|
+ dragedTable_preCell.style.cursor = "";
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ dragedTable_movable = false;
|
|
|
|
|
+ //清除提示图层
|
|
|
|
|
+ document.getElementById(dragedTable_movedDiv).style.display = "none";
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ document.onkeydown = function (event) {
|
|
|
|
|
+ var event = event || window.event;
|
|
|
|
|
+ // var target = event.srcElement || event.target;
|
|
|
|
|
+ if (event.keyCode == 17) {
|
|
|
|
|
+ flag = false;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 鼠标放开执行的事件
|
|
|
|
|
+ document.onmouseup = function () {
|
|
|
|
|
+ hideDiv();
|
|
|
|
|
+ var oTable = document.getElementById(dragedTable_tableId);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 键盘放开执行的事件
|
|
|
|
|
+ document.onkeyup = function () {
|
|
|
|
|
+ flag = true;
|
|
|
|
|
+ hideDiv();
|
|
|
|
|
+ var oTable = document.getElementById(dragedTable_tableId);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // 鼠标移动时执行的事件
|
|
|
|
|
+ document.onmousemove = function () {
|
|
|
|
|
+ dragDiv();
|
|
|
|
|
+ }
|
|
|
|
|
+ /************************************ dragedTableData.js 结束 *******************************/
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
|
|
+ <script language="javascript">
|
|
|
|
|
+ function init() {
|
|
|
|
|
+ //注册可拖拽表格
|
|
|
|
|
+ new DragedTable("tableId");
|
|
|
|
|
+ }
|
|
|
|
|
+ </script>
|
|
|
|
|
+</HEAD>
|
|
|
|
|
+<BODY oncontextmenu="return false;" onload="init()">
|
|
|
|
|
+<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TH colspan="4" style="">拖动交换单元格内容</TH>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>Java</TD>
|
|
|
|
|
+ <TD>Java One</TD>
|
|
|
|
|
+ <TD>JBuilder</TD>
|
|
|
|
|
+ <TD>Stuts</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>C++</TD>
|
|
|
|
|
+ <TD>Visual Studio</TD>
|
|
|
|
|
+ <TD>Office</TD>
|
|
|
|
|
+ <TD>Windows</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>PhotoShop</TD>
|
|
|
|
|
+ <TD>Java</TD>
|
|
|
|
|
+ <TD>Illustrator</TD>
|
|
|
|
|
+ <TD>PageMaker</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>Cartoon</TD>
|
|
|
|
|
+ <TD>Telephone</TD>
|
|
|
|
|
+ <TD>China</TD>
|
|
|
|
|
+ <TD>USA</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>Java</TD>
|
|
|
|
|
+ <TD>Java One</TD>
|
|
|
|
|
+ <TD>JBuilder</TD>
|
|
|
|
|
+ <TD>Stuts</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>C++</TD>
|
|
|
|
|
+ <TD>Visual Studio</TD>
|
|
|
|
|
+ <TD>Office</TD>
|
|
|
|
|
+ <TD>Windows</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>PhotoShop</TD>
|
|
|
|
|
+ <TD>Flash</TD>
|
|
|
|
|
+ <TD>Illustrator</TD>
|
|
|
|
|
+ <TD>PageMaker</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD>Cartoon</TD>
|
|
|
|
|
+ <TD>Telephone</TD>
|
|
|
|
|
+ <TD>China</TD>
|
|
|
|
|
+ <TD>USA</TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+ <TR>
|
|
|
|
|
+ <TD></TD>
|
|
|
|
|
+ <TD></TD>
|
|
|
|
|
+ <TD></TD>
|
|
|
|
|
+ <TD></TD>
|
|
|
|
|
+ </TR>
|
|
|
|
|
+</TABLE>
|
|
|
|
|
+</BODY>
|
