转载：javascript 拖拽排序，简洁示例备忘
转载自：http://blog.csdn.net/wang4978/article/details/6721157
<html>
<head>
<title>拖动行测试</title>
<script type="text/javascript">
var beginMoving = false;
function MouseDownToMove(obj) {
obj.style.zIndex = ;
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 = ;
obj.style.left = ;
obj.style.zIndex = ;
beginMoving = false;
var tempTop = event.clientY - obj.mouseDownY;
var tempRowIndex = (tempTop - tempTop % ) / ;
if (tempRowIndex + obj.rowIndex < ) tempRowIndex = -;
else tempRowIndex = tempRowIndex + obj.rowIndex;
if (tempRowIndex >= obj.parentElement.rows.length - ) tempRowIndex = obj.parentElement.rows.length - ;
obj.parentElement.moveRow(obj.rowIndex, tempRowIndex);
}
</script> </head> <body>
<table id="filelistTab" cellspacing="" cellpadding="" border=>
<tr>
<td class="gridtitle" style="WIDTH: 40px">列一</td>
<td class="gridtitle" style="WIDTH: 100px">列二</td>
<td class="gridtitle" style="WIDTH: 110px">列三</td>
</tr> <tr id="" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group1" style="WIDTH: 30px" type="text" readonly value="" /></td>
<td class="gridtitle"> </td>
<td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="width:100px" value="" /></td>
</tr> <tr id="" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group2" style="WIDTH: 30px" type="text" readonly value="" /></td>
<td class="gridtitle"> </td>
<td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="width:100px" value="" /></td>
</tr> <tr id="" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group3" style="WIDTH: 30px" type="text" readonly value="" /></td>
<td class="gridtitle"> </td>
<td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="width:100px" value="" /></td>
</tr> <tr id="" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group4" style="WIDTH: 30px" type="text" readonly value="" /></td>
<td class="gridtitle"> </td>
<td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="width:100px" value="" /></td>
</tr> <tr id="" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group5" style="WIDTH: 30px" type="text" readonly value="" /></td>
<td class="gridtitle"> </td>
<td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="width:100px" value="" /></td>
</tr> <tr id="" title="拖动行可以进行排序" style="cursor:move ;position:relative;" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>
<td class="gridtitle"><input class="text" id="group6" style="WIDTH: 30px" type="text" readonly value="" /></td>
<td class="gridtitle"> </td>
<td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="width:100px" value="" /></td>
</tr> </table>
</body>
</html>
转载：javascript 拖拽排序，简洁示例备忘的更多相关文章
- dragsort html拖拽排序
一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
- RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...
- easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
- React造轮子：拖拽排序组件「Dragact」
先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...
随机推荐
- 监听Android CTS测试项解决方案（二）
二,监听当前测试项是否是Accelerometer Measurement Test测试项 通过第一种方式介绍的,我们可以得到当前处于活动状态的Activity类似监听CTS测试当前的测试项.但是由于 ...
- HDU 1053 & HDU 2527 哈夫曼编码
http://acm.hdu.edu.cn/showproblem.php?pid=1053 #include <iostream> #include <cstdio> #in ...
- 【转】SQL SERVER日志满或过大的处理方法
原文转自:http://blog.chinaunix.net/uid-7953959-id-2543262.html 事务日志文件Transaction Log File是用来记录数据库更新情况的文件 ...
- Log4Cplus的介绍
Log4Cplus是一款很好的开源日志打印程序,该日志打印程序的配置文件为类似INI的文件,以下为该日志打印程序配置文件中的说明: 1.#—注释行的开头表示,即以该字符开头的行,改日志程序不解释改行内 ...
- Xcode Snippets
在Double Encore,我们写的代码都是干净,可重用的——不过,有时候并不能完全做到.如在使用pragma mark的时候.下面就是一个示例: #pragma mark - UIViewCo ...
- yii弹出层
Yii弹出层,包装了JQuery的JDialog,使用很方便.Yii组件功能太强大,强大到无法自拔 $this->beginWidget('zii.widgets.jui.CJuiDialog' ...
- 解决：导入第三方jar包后，仍然出现java.lang.NoClassDefFoundError的错误
最近,在运行某个Android工程的时候,一直抛出java.lang.NoClassDefFoundError异常. 按照异常所给出的信息,应该是程序使用到的第三方jar包出了问题. 但是,这些第三方 ...
- 浅谈github页面域名绑定
来源:http://yanping.me/cn/blog/2011/12/04/github-pages-domain/ 前段时间看到COS上的各位都有博客,也想开个博,给COS的各位管理员发邮件,向 ...
- UI学习笔记---第十三天可视化设计 XIB, StoryBoard
一.XIB Xib是一种苹果提供的快速构建界面的编程方式,主要是为了简化MVC中的V的构建 Xib提供可视化的编辑界面,能大大提升页面布局效率 Xib常用操作 为控件关联事件 为空间指定delegat ...
- Linux启动流程详解
在BIOS阶段,计算机的行为基本上被写死了,可以做的事情并不多:一般就是通电.BIOS.主引导记录.操作系统这四步.所以我们一般认为加载内核是linux启动流程的第一步. 第一步.加载内核 操作系统接 ...