转载自：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 拖拽排序，简洁示例备忘的更多相关文章

  1. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  2. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  3. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  4. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

  5. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  6. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  7. RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...

  8. easyui树节点拖拽排序的存储过程

    easyui树的拖拽排序功能 easyui树中有拖拽功能 树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...

  9. React造轮子：拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

随机推荐

  1. 45个非常有用的oracle语句（摘自尚学堂）

    日期/时间 相关查询 获取当前月份的第一天 运行这个命令能快速返回当前月份的第一天.你可以用任何的日期值替换 “SYSDATE”来指定查询的日期. 1 2 SELECT TRUNC (SYSDATE, ...

  2. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  3. MAC PHP MARK

    这是一篇以 iOS 开发人员的视角写给广大iOS 程序猿的 PHP 入门指南.在这篇文章里我努力去发掘 objectiv-c 与 php 之间的共性,来帮助有一定 iOS 开发经验的攻城狮来快速上手一 ...

  4. php大力力 [013节]mySQL数据库乱码问题我还没解决

    <?php echo"测试<br>"; $sql_connection = mysql_connect("localhost","e ...

  5. N的阶乘的长度

    阶乘是乘法 , 乘法的话 , 几位数*几位数的位数 就是 哪两个几位数相加 .  这个可以用log10来解决 , 所以有如下代码 . #include<stdio.h> #include& ...

  6. Unity3D ShaderLab 模拟精灵动画

    Unity3D ShaderLab 模拟精灵动画 在上一篇,介绍了通过Shader 模拟纹理运动,那么更深一步讲,我们也可以把帧动画的精灵纹理运动通过shader实现. 虽然大家都是在游戏脚本中做更高 ...

  7. 学习opengl十大网站（转载）

    [转载] 1．http://nehe.gamedev.net/这个是我觉得全世界最知名的OpenGL教程,而且有网友将其中48个教程翻译成了中文http://www.owlei.com/Dancing ...

  8. PHP生成图片验证码(simple)

      php新手,写了一个web登录界面,除了用户名,密码,感觉有个验证码会比较cool一点,便根据参考书的简单介绍,写了一个image.php来生成简单的图片验证码,颇有感慨,分享一下. 1. 图片验 ...

  9. UVa 10624 - Super Number

    题目大意 给定两个数n和m,如果长度为m的数满足对于每个i(n<=i<=m),数字的前i位都能被i整除,那么这个数就是超级数,求出字典序最小的符合要求的超级数. 分析 直接暴力搜索 #in ...

  10. Bash 使用技巧

    Bash 是我们经常与之打交道的 Shell 程序,本文针对其使用技巧进行了搜罗.相信在你看过这些内容之后,定会在 Bash 的世界里游刃有余. 从历史中执行命令 有时候,我们需要在 Bash 中重复 ...