改进的table单元格拖拽，可限制能拖动的连续单元格范围
来源：互联网 发布：虾囧笑话源码 编辑：程序博客网 时间：2024/06/06 03:39
<html><HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>拖动</TITLE></HEAD><STYLE> table { border: 1px solid black; font-size: 18px; color:#464040; font-weight: bold; } th { height: 40px; font-size: 20px; font-weight: bold; /*border-bottom: 2px solid black;*/ } td { width: 20%; height: 40px; border-top: 1px solid black; border-right: 1px solid black; cursor: default; text-align: center; } td:nth-child(2){ background: #C1DBF5; } td:nth-child(3){ background: #C1DBF5; } td:nth-child(4){ background: #C1DBF5; } .dvMove { font-size: 12px; width: 85%; height: 90%; background: #3B9DFF; border:1px solid gray; margin: 0 auto; text-align: center; line-height: 40px; font-size: 18px; }</STYLE><BODY oncontextmenu="return false;"><TABLE id="tableId" width="80%" align="center" cellpadding="0" cellspacing="0"> <tbody> <TR> <TH colspan="5" style="">拖动交换单元格内容（限制了拖拽的范围为2,3,4列，且只能在行内拖动）可自己设定</TH> </TR> <TR> <TD> <div class="dvMove">J</div> </TD> <TD class="moveCol a1 a2"> <div class="dvMove">Java</div> </TD> <TD class="moveCol"> <div class="">nn</div> </TD> <TD class="moveCol"><div class="dvMove">mm</div></TD> <TD>m1</TD> </TR> <TR> <TD> <div class="dvMove">v123</div> </TD> <TD class="moveCol"> <div class="">C++</div> </TD> <TD class="moveCol"> <div class="dvMove">Visual Studio</div> </TD> <TD class="moveCol"> <div class="">Office</div> </TD> <TD>Windows</TD> </TR> <TR> <TD>m124</TD> <TD class="moveCol">PhotoShop</TD> <TD class="moveCol"> <div class="">Java</div> </TD> <TD class="moveCol"> <div class="dvMove">Illustrator</div> </TD> <TD> <div class="dvMove">PageMaker</div> </TD> </TR> <TR> <TD>m1244</TD> <TD class="moveCol"> <div class="dvMove">Cartoon</div> </TD> <TD class="moveCol">Telephone</TD> <TD class="moveCol">China</TD> <TD> <div>USA</div> </TD> </TR> <TR> <TD>m125</TD> <TD class="moveCol">Java</TD> <TD class="moveCol">Java One</TD> <TD class="moveCol">JBuilder</TD> <TD>Stuts</TD> </TR> </tbody></TABLE></BODY><script src="dragTableCellHandV.js"></script><script language="javascript"> window.onload = function () { init(); } function init() { //注册可拖拽表格 var oTable = document.getElementById("tableId"); /* tableId: 要拖拽的table的id； xCanMove: true,表示能在水平方向拖动；false,表示不能在水平方向拖动； yCanMove: true,表示能在垂直方向拖动；false,表示不能在垂直方向拖动； TargetCellFrom: 能拖动的连续单元格范围，第一个单元格。 TargetCellTo: 能拖动的连续单元格范围，最后一个单元格。 moveClassName: 给可以拖动的列设置的css中的className。如：<td class='moveCol'> */ new DragedTD("tableId", true, false, oTable.rows[1].cells[1], oTable.rows[5].cells[3], 'moveCol','dvMove'); }</script></HTML>/************************************ dragedTableData.js *******************************//*说明： 功能：让table中的td可以拖拽。目前版本支持在单行横向拖动，且设置拖动的范围。 主要处理以下情况：对包含DOM的td，如div。可以做td拖拽，并与目标td交换内容。 需要在css中设置： 1、需要拖拽的td需要一个单独标识的class,如设置成class = moveCol 如： <TD class="moveCol"> <div class="dvContent">Cartoon</div> </TD> 2、<td>里面需要有一层元素，如div. 使用方法： 只需要引入dragTableCellHandV.js文件。 并new函数：new DragedTD("tableId", true, false, oTable.rows[1].cells[1], oTable.rows[5].cells[3], 'moveCol'); /* 参数说明： tableId: 要拖拽的table的id； xCanMove: true,表示能在水平方向拖动；false,表示不能在水平方向拖动； yCanMove: true,表示能在垂直方向拖动；false,表示不能在垂直方向拖动； TargetCellFrom: 设置能拖动的连续单元格范围，第一个单元格。 TargetCellTo: 设置能拖动的连续单元格范围，最后一个单元格。 moveTdClassName: 给可以拖动的列设置的css中的className。如：<td class='moveCol'> moveEleClassName: 给可以拖动的列中的div设置的css中的className。如：<div class="dvMove">Cartoon</div> *//*--------全局变量-----------*/var dragedTd_x_begin, dragedTd_y_begin, dragedTd_eventX, dragedTd_eventY;var dragedTable_movable = false;var preCell = null;var cellNormalColor = null;//起始单元格的颜色var dragedTable_preColor = "lavender";//淡紫色//目标单元格的颜色var targetColor = "red";//"#FFCCFF";//粉红色var dragedTable_movedDiv = "dragedTable_movedDiv";var userTableId = "";//xMoveFlag：true，能在x方向上移动。yMoveFlag:true,能在y方向上移动。var xMoveFlag, yMoveFlag;var moveDivClassName;var moveColClassNamevar beginTargetCell, endTargetCell;//创建cell的过渡div且显示为none，按下鼠标后，过渡div显示，且起始单元格变为淡紫色function DragedTD(tableId, xCanMove, yCanMove, TargetCellFrom, TargetCellTo, moveTdClassName,moveEleClassName) { /*--------全局变量-----------*/ userTableId = tableId; xMoveFlag = xCanMove yMoveFlag = yCanMove; beginTargetCell = TargetCellFrom; endTargetCell = TargetCellTo; moveColClassName = moveTdClassName; moveDivClassName = moveEleClassName; //创建过渡层div var oTempDiv = document.createElement("div"); oTempDiv.id = dragedTable_movedDiv; oTempDiv.onselectstart = function () { return false; }; oTempDiv.style.cursor = "move"; oTempDiv.style.position = "absolute"; //oTempDiv.style.border = "1px solid black"; oTempDiv.style.border = "none"; oTempDiv.style.backgroundColor = "transparent";//targetColor; oTempDiv.style.display = "none"; document.body.appendChild(oTempDiv); // 注册鼠标按下事件 var tableObj = document.getElementById(userTableId); tableObj.onmousedown = function () { if (tableObj.setCapture) {//全局捕获，解决ie8以下兼容性问题 tableObj.setCapture(); } showDiv();//显示过渡层 return false; };}//显示过渡层div,function showDiv() { var event = getEvent(); var eventObj = event.srcElement ? event.srcElement : event.target; //获取红色过度div var oDiv = document.getElementById(dragedTable_movedDiv); if (eventObj.parentNode.className.match(moveColClassName) != null && eventObj.parentNode.tagName.toLowerCase() == "td" && eventObj.className.match(moveDivClassName)!=null) { eventObj = eventObj.parentNode; var pos = getPos(eventObj); //计算中间过度层位置，赋值 oDiv.style.width = eventObj.offsetWidth;//td的width oDiv.style.height = eventObj.offsetHeight;//td的Height oDiv.style.left = pos[1];//td的坐标x oDiv.style.top = pos[0];//td的坐标y oDiv.innerHTML = eventObj.innerHTML;//把起始td的innerHTML赋值给oDiv的innerHTML oDiv.style.display = "block"; dragedTd_x_begin = pos[1]; dragedTd_y_begin = pos[0]; dragedTd_eventX = event.clientX; dragedTd_eventY = event.clientY; //设置起始td样式和记住它的信息 //cellNormalColor = eventObj.style.backgroundColor; cellNormalColor = eventObj.style.borderColor; eventObj.style.backgroundColor = dragedTable_preColor;//起始单元格颜色为淡紫 preCell = eventObj; //起始单元格 dragedTable_movable = true; }}function dragDiv() {// 根据参数决定移动过渡div移动方式，移动它，到目标单元格之上，改变目标单元格样式（背景色变为粉红色）。 if (dragedTable_movable) { var event = getEvent(); //获取过度cell的div var oDiv = document.getElementById(dragedTable_movedDiv);// 获取起始table var oTable = document.getElementById(userTableId); var minLeft, maxLeft, minTop, maxTop; console.log("beginTargetCell:" + beginTargetCell); var minPos = getPos(beginTargetCell); var maxPos = getPos(endTargetCell); minLeft = minPos[1]; maxLeft = maxPos[1]; minTop = minPos[0]; maxTop = maxPos[0]; if (xMoveFlag) { var l = event.clientX - (dragedTd_eventX - dragedTd_x_begin); var oDivleft = l; if (l < minLeft) oDivleft = minLeft; if (l > maxLeft) oDivleft = maxLeft; oDiv.style.left = oDivleft + "px"; } if (yMoveFlag) { oDiv.style.top = event.clientY - dragedTd_eventY + dragedTd_y_begin + "px"; } for (var j = 1; j < oTable.rows.length; j++) { for (var i = 0; i < oTable.rows[j].cells.length; i++) { var cell = oTable.rows[j].cells[i]; if (cell.tagName.toLowerCase() == "td") { var pos = new Array(); pos = getPos(cell); var posX = pos[1]; var posY = pos[0]; var x = event.x || event.pageX; var y = event.y || event.pageY; if (x >= minLeft && x <= maxLeft + endTargetCell.offsetWidth && posY == oDiv.offsetTop && x > posX && x < posX + cell.offsetWidth && y > posY && y < posY + cell.offsetHeight) { if (cell != preCell) { cell.style.backgroundColor = targetColor; //cell.style.border = "2px solid " + targetColor; } } else { if (cell != preCell) cell.style.backgroundColor = cellNormalColor; // cell.style.border = "1px solid " + cellNormalColor; } } } } }}function hideDiv() { if (dragedTable_movable) { var event = getEvent();// 获取table var oTable = document.getElementById(userTableId); //获取过度cell的div var oDiv = document.getElementById(dragedTable_movedDiv); var minLeft, maxLeft, minTop, maxTop; var minPos = getPos(beginTargetCell); var maxPos = getPos(endTargetCell); minLeft = minPos[1]; maxLeft = maxPos[1]; minTop = minPos[0]; maxTop = maxPos[0]; if (preCell != null) { for (var j = 1; j < oTable.rows.length; j++) { for (var i = 0; i < oTable.rows[j].cells.length; i++) { var cell = oTable.rows[j].cells[i]; var pos = new Array(); pos = getPos(cell); var posX = pos[1]; var posY = pos[0]; var x = event.x || event.pageX; var y = event.y || event.pageY; //计算鼠标位置，是否在某个单元格的范围之内 if (x >= minLeft && x <= maxLeft + endTargetCell.offsetWidth && posY == oDiv.offsetTop && x > posX && x < posX + cell.offsetWidth && y > posY && y < posY + cell.offsetHeight) { if (oTable.rows[j].cells[i].tagName.toLowerCase() == "td") { //交换文本 preCell.innerHTML = cell.innerHTML; cell.innerHTML = document.getElementById(dragedTable_movedDiv).innerHTML; //清除原单元格和目标单元格的样式 preCell.style.backgroundColor = cellNormalColor; cell.style.backgroundColor = cellNormalColor; cell.style.cursor = ""; preCell.style.cursor = ""; } } } } } dragedTable_movable = false; //清除提示图层 document.getElementById(dragedTable_movedDiv).style.display = "none"; }}document.onmouseup = function () { var oTable = document.getElementById(userTableId); hideDiv(); var oTable = document.getElementById(userTableId); for (var j = 1; j < oTable.rows.length; j++) { for (var i = 0; i < oTable.rows[j].cells.length; i++) { oTable.rows[j].cells[i].style.backgroundColor = cellNormalColor; } } if (oTable.releaseCapture) { oTable.releaseCapture(); } return false;}document.onmousemove = function () { var oTable = document.getElementById(userTableId); dragDiv(); return false;}function getEvent() {// var ev = arguments[0] || window.event;// return ev; if (document.all) { return window.event; //如果是ie } func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null;}//得到控件的绝对位置function getPos(cell) { var pos = new Array(); var t = cell.offsetTop; var l = cell.offsetLeft;// console.log("l t:"+l+"+"+t);// console.log("cell.offsetParent:"+cell.offsetParent); while (cell = cell.offsetParent) { t += cell.offsetTop; l += cell.offsetLeft; }// console.log("l t:"+l+"+"+t); pos[0] = t; pos[1] = l; return pos;}/************************************ dragedTableData.js 结束 *******************************/
0 0
- 改进的table单元格拖拽，可限制能拖动的连续单元格范围
- Table中单元格的移动
- table的单元格居中调试
- 类似excel一样拖动选择table单元格的javascript实现 2W个单元格 的IE效率 怎么做更高
- 改进版网页表格的合并单元格(支持不连续的列合并)
- js动态的合并table的单元格
- GirdView拖动单元格，鼠标释放后更新拖动范围内的单元格
- table的宽度,单元格内换行问题
- Table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- table的宽度,单元格内换行问题
- 为TABLE的单元格设置颜色
- Table 控件单元格的动态合并技术
- js 获取table单元格的内容
- Table 控件单元格的动态合并技术 .
- 合并table相同单元格的jquery插件
- 修改table中单元格的内容
- 字符设备驱动----LED驱动程序
- 反射型xss偷取cookie（本地验证）
- 第一次创建技术博客
- Mac OS X El Captain上安装MySQLdb
- android learn Layout_what in XML
- 改进的table单元格拖拽，可限制能拖动的连续单元格范围
- OpenCV中读取视频帧像素值的一般方法
- 构造和解析Json数据
- Normalization Methods
- android调试时apk可运行，导出签名的apk后, 有些功能闪退，
- html中ul元素水平排列问题
- 下一个风口：机器人--工业/农业4.0（李泽湘演讲笔记）
- java设计模式—工厂模式
- Dimensionality Reduction Techniques for Data Visualization
