模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
JS实现表格单元格拖动排序_层和布局特效
查看演示效果
特效Tag:
表格排序
添加
JS实现表格单元格拖动排序,你见过吗?很有创意。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>单元格拖动排序</title> <meta http-equiv="mrc-type" mrc="text/html;charset=gb2312"> <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:26;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:26;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:26;position:relative;" onmousedown="MouseDownToMove(this)" onmousemove="MouseMoveToMove(this)" onmouseup="MouseUpToMove(this);"> <td>4</td> <td>4</td> <td>4</td> </tr> </table> </body> </html>
所属频道:
层和布局特效
/
更新时间:2012-12-26
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
表格内容排序sortTable
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
JavaScript + CSS 美化出的条纹表格样式
一行三列自适应的CSS列表布局
特殊字符实现的CSS圆角
CSS中1px虚线边框的方法
鼠标点击后层展开JavaScript
CSS层透明效果,兼容性很好
jQuery 弹出菜单层
Js模拟弹出层(不刷新弹出内容框、图片、登录框)
CSS让同一行的图片和文字垂直居中对齐
鼠标经过时慢慢缓冲滑开一个层
猜你也喜欢看这些
打开一个窗口在一定的时间内自动关闭
CSS表格单元格背景颜色渐变
JS无刷新改变网页背景图片
鼠标滑向表格,变换背景图片
图片与文字半透明效果,鼠标移上不透明
CSS渐变背景的6个演示代码
在一定时间内打开一个新的窗口
自动弹出的导航窗
IE色彩处理过程
Js适时切换网页背景颜色
相关链接:
复制本页链接
|
搜索JS实现表格单元格拖动排序
特效说明:
层和布局模板
-
JS实现表格单元格拖动排序
。