主站
经典论坛
家园
作品集
Think.Pages
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
WEB标准化专栏
» 用鼠标拖动TR进行排序
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
[求助]
用鼠标拖动TR进行排序
josh
[楼主]
JOSH
中级会员
帖子
88
体力
290
威望
0
离线
22 天
个人网站
发短消息
加为好友
1
#
大
中
小
发表于 2008-6-30 23:30
实现:用鼠标拖动TR改变排序.
之前找到一段代码,但只支持IE6,有其它好的代码能够实现吗?
或是如何修改此代码让它兼容IE7,FF.谢谢大家.
<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> 用鼠标移动TR<br> <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>
提示:您可以先修改部分代码再运行
xjw_josh@hotmail.com
www.fengsha.net
www.nvzhuang.net
www.zhgg.net
积分
290
阅读权限
30
在线时间
8 小时
注册时间
2002-12-17
最后登录
2008-8-15
查看个人网站
查看详细资料
TOP
做西部数码代理.Cn1元国际45元
|
将虚拟化进行到底
birdboy
高级会员
帖子
927
体力
614
威望
0
当前
福建 泉州
离线
2 天
个人空间
发短消息
加为好友
2
#
大
中
小
发表于 2008-7-1 10:53
学习了顶
我正在努力。
积分
614
阅读权限
50
性别
男
在线时间
349 小时
注册时间
2004-5-30
最后登录
2008-9-4
查看详细资料
TOP
【美橙超级G空间】688元绑定10个子目录
|
oracle工程师注册
expression
高级会员
帖子
906
体力
715
威望
0
离线
4 天
个人空间
发短消息
加为好友
3
#
大
中
小
发表于 2008-7-1 14:17
在IE7下运行正常。
彳亍日寺米青女少言亥言兑金童女子
积分
715
阅读权限
50
在线时间
654 小时
注册时间
2007-12-4
最后登录
2008-9-2
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
simplewebs
银牌会员
帖子
5840
体力
2932
威望
0
当前
上海 普陀
离线
1 天
个人网站
发短消息
加为好友
专长
网页设计,前端制作,UE
4
#
大
中
小
发表于 2008-7-1 15:06
我同事弄的一个,只支持FF IE7。哈哈哈
Simpledc.com旅行
|
Taobaoebay.net卖球衣
积分
2932
阅读权限
70
性别
男
在线时间
1033 小时
注册时间
2002-10-15
最后登录
2008-9-5
查看个人网站
查看详细资料
TOP
还在为头像烦恼?还在为不能关注好友动态烦忧?快来
蓝色理想家园
吧!
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版