做了个Table 的Row拖动，有兴趣的来看看

harryCom 2005-02-05 03:54:59
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
<!--
//Author : Harry
var Start = 0;
var Do = false
var row = 0

function Drap(){
if(Start == 1){
var Pox = event.clientX
var Poy = event.clientY
dv.style.pixelLeft= Pox-10
dv.style.pixelTop= Poy-10
}
//alert(Pox)
}
function DrapStart(){
var obj = window.event.srcElement
row = obj.parentElement.rowIndex
if(obj.tagName != "TD") return;
Start = 1;
dv.style.display = ""
dv.children[0].rows[0].cells[0].innerText = obj.parentElement.children[0].innerText
dv.children[0].rows[0].cells[1].innerText = obj.parentElement.children[1].innerText
dv.children[0].rows[0].cells[2].innerText = obj.parentElement.children[2].innerText
}
function DrapEnd(){
Start = 0;
dv.style.pixelLeft= 0
dv.style.pixelTop= -100
dv.style.display = "none"
var obj = window.event.srcElement
Do = true
}
function StartDo(){
if(Do){
var obj = window.event.srcElement
if(obj.parentElement.rowIndex == row){
Do = false
return;
}
//alert(obj.parentElement.rowIndex)
tb.deleteRow(row)
var objRow = tb.insertRow(obj.parentElement.rowIndex+1)
objRow.attributes.item("bgColor").nodeValue="#efefef"
var objCell = objRow.insertCell()
objCell.innerText = dv.children[0].rows[0].cells[0].innerText
var objCell = objRow.insertCell()
objCell.innerText = dv.children[0].rows[0].cells[1].innerText
var objCell = objRow.insertCell()
objCell.innerText = dv.children[0].rows[0].cells[2].innerText
Do = false
}
}
//-->
</script>
</head>
<body onmousemove="Drap()">
<TABLE WIDTH="300" BORDER="0" CELLSPACING="1" CELLPADDING="1" bgcolor="#888888" ID="tb" onmousedown="DrapStart()" onmousemove="StartDo()">
<script language=javascript>
<!--
for(var i=0;i<15;i++){
document.write("<TR bgcolor=#ffffff><TD>"+i+"</TD><TD>"+i+"</TD><TD>"+i+"</TD></TR>")
}
//-->
</script>
<TR bgcolor="#ffffff">
<TD>1</TD>
<TD>1</TD>
<TD>1</TD>
</TR>
</TABLE>
<div id="dv" style="cursor:hand;display:none" style="POSITION: absolute" onmouseup="DrapEnd()">
<TABLE WIDTH="300" BORDER="0" CELLSPACING="1" CELLPADDING="1" bgcolor="#888888">
<TR bgcolor="#ffffff">
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</div>
</body>
</html>
...全文
361 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
gaochao79 2005-03-14
  • 打赏
  • 举报
 回复
代码没有注释，稍嫌不足，苦了我这script新手了
gaochao79 2005-03-14
  • 打赏
  • 举报
 回复
两个牛人！哪个方便一点？
segl 2005-03-14
  • 打赏
  • 举报
 回复
厉害~~
chaobill 2005-03-14
  • 打赏
  • 举报
 回复
收藏，用来做 OneNote
yeyu710 2005-03-13
  • 打赏
  • 举报
 回复
哈, 我找了好久,终于找到了,太好了,谢了,楼上的高手!
evence 2005-02-17
  • 打赏
  • 举报
 回复
不错。顶。
chenghaofeng 2005-02-17
  • 打赏
  • 举报
 回复
8错
sfply 2005-02-07
  • 打赏
  • 举报
 回复
不错，一定会有用处的
JK_10000 2005-02-07
  • 打赏
  • 举报
 回复
刚才看到楼主的代码后
换一种思路也写了一个：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language="javascript">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}

function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}

</script>
</head>
<body >

<TABLE WIDTH="300" BORDER="1" >

<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR>

</script>
</TABLE>

</body>
</html>
harryCom 2005-02-07
  • 打赏
  • 举报
 回复
JK_10000(JK) 做得不错压，没有想到Row也可以用style的top和left，代码也简单很多
大连豆包 2005-02-06
  • 打赏
  • 举报
 回复
做的太好了，值得收藏
z3h 2005-02-05
  • 打赏
  • 举报
 回复
这种需求以后我们肯定会有的。谢谢。
我本一凡尘 2005-02-05
  • 打赏
  • 举报
 回复
挺好玩！！
flyskytoday 2005-02-05
  • 打赏
  • 举报
 回复
蛮好地

学习中
harryCom 2005-02-05
  • 打赏
  • 举报
 回复
呵呵，做来玩玩，暂时是没有用处，不过我经常写的js都是处理Table,很可能某一天有这样的需求
梅雪香 2005-02-05
  • 打赏
  • 举报
 回复
支持，不错
DwNet 2005-02-05
  • 打赏
  • 举报
 回复
不错,:)

从需求的角度来看,个人感觉用处不是很大,为何有这种需求?:)

顶一下
Power Query For Excel数据处理利器（高级篇）
数据源的获取函数 Table高级函数 List列表高级函数 Record记录高级函数 日期函数 时间函数 正则表达式应用 网页抓取函数
element-ui table 表格组件实现可拖拽效果（行、列）
element-ui table 表格组件实现可拖拽效果（行、列）
iView踩坑日记(二)
iView表格Table 我当时在做一个表格联选的功能，大概就是上下两个表格，上边的行选中后出现在下面的表格中，取消选中后就从下面表格剔除，下面表格的选中状态都是已选中，点击取消选中后就提出该数据并且也修改上面...
table 详解
table 这个 HTML 标签，是一个很有传奇色彩的标签。它经历过大起大落，走过巅峰，又被人深深唾弃，但仍然不气不馁，在 EDM网页 、居中、数据展示等需求中发挥着不可替代的作用。很多人认为那就是个用 DW 拖拽出来的...
Bootstrap-table 显示数据到表格
　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章