javascript实现的拖动表格行排序

最新推荐文章于 2024-04-25 10:29:01 发布
最新推荐文章于 2024-04-25 10:29:01 发布
阅读量3.3k 收藏 2
点赞数
分类专栏： Jquery 文章标签： javascript class function border 测试
 

 转自：http://blog.csdn.net/raul_qu/article/details/1968712
<html>
<head>
    <title>拖动行测试</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  id="filelistTab" cellspacing="0" cellpadding="2" border=1>
<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="1" title="拖动行可以进行排序" style="cursor:move ;position:relative;" οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'>
    <td class="gridtitle"><input class="text" id="group1" style="WIDTH: 30px" type="text" readonly value="1" /></td>
    <td class="gridtitle">
        11111111111111111111
    </td>
    <td class="gridtitle"><input class="text" id="fn1" readOnly type="text" style="width:100px" value="11111111111111111111" /></td>
</tr>

<tr id="2" title="拖动行可以进行排序" style="cursor:move ;position:relative;" οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'>
    <td class="gridtitle"><input class="text" id="group2" style="WIDTH: 30px" type="text" readonly value="2" /></td>
    <td class="gridtitle">
        222222222222222222222
    </td>
    <td class="gridtitle"><input class="text" id="fn2" readOnly type="text" style="width:100px" value="22222222222222222222222" /></td>
</tr>

<tr id="3" title="拖动行可以进行排序" style="cursor:move ;position:relative;" οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'>
    <td class="gridtitle"><input class="text" id="group3" style="WIDTH: 30px" type="text" readonly value="3" /></td>
    <td class="gridtitle">
        3333333333333333333333
    </td>
    <td class="gridtitle"><input class="text" id="fn3" readOnly type="text" style="width:100px" value="333333333333333" /></td>
</tr>

<tr id="4" title="拖动行可以进行排序" style="cursor:move ;position:relative;" οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'>
    <td class="gridtitle"><input class="text" id="group4" style="WIDTH: 30px" type="text" readonly value="4" /></td>
    <td class="gridtitle">
        444444444444444444444
    </td>
    <td class="gridtitle"><input class="text" id="fn4" readOnly type="text" style="width:100px" value="4444444444444444444444444444" /></td>
</tr>

<tr id="5" title="拖动行可以进行排序" style="cursor:move ;position:relative;" οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'>
    <td class="gridtitle"><input class="text" id="group5" style="WIDTH: 30px" type="text" readonly value="5" /></td>
    <td class="gridtitle">
        55555555555555555555555
    </td>
    <td class="gridtitle"><input class="text" id="fn5" readOnly type="text" style="width:100px" value="555555555555555555555" /></td>
</tr>

<tr id="6" title="拖动行可以进行排序" style="cursor:move ;position:relative;" οnmοusedοwn='MouseDownToMove(this)' οnmοusemοve='MouseMoveToMove(this)' οnmοuseup='MouseUpToMove(this);'>
    <td class="gridtitle"><input class="text" id="group6" style="WIDTH: 30px" type="text" readonly value="6" /></td>
    <td class="gridtitle">
        6666666666666666666666666
    </td>
    <td class="gridtitle"><input class="text" id="fn6" readOnly type="text" style="width:100px" value="666666666666666666666" /></td>
</tr>

</table>
</body>
</html>

wang49787
关注
专栏目录
js原生实现表格行的拖动排序
07-17
js原生实现表格行的
javascript实现表格的单元格拖动排序
09-15
javascript实现表格的单元格拖动排序，对实现图片的拖动排序有启发
js实现表格拖拽排序
weixin_34409741的博客
03-15 480
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jqueryUI拖动</title></head><script src="js/jquery-1.11.0.min.js"></script>...
JS实现表格行拖动
baodao9862的博客
12-12 168
实现功能： 在Table上实现行的拖动。支持预览 忽略THEAD/TFoot的行 支持的两个函数 if(window.scrollTop==null) { window.scrollTop=f...
JavaScript实现表格列拖动、排序的功能
05-01
内容索引:脚本资源,Ajax/JavaScript,表格拖动,表格排序　　利用JavaScript实现对表格列的排序，并可以用鼠标拖动列宽，以显示出被遮挡的内容，源代码用到两个JS代码类，可移植操作，重用率高。
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
10-16
总之，ElementUI和Sortable.js的结合为开发人员提供了一种简洁有效的方式来实现行拖拽排序功能，极大地提高了开发效率，并且为用户带来了流畅的交互体验。开发者可以根据实际的项目需求，灵活地应用这一技术组合来...
javascript实现表格排序 编辑 拖拽 缩放
12-12
简单表格排序  可以双击编辑 自定义编辑后的 规则  可拖动列进行列替换  可推动边框进行列宽度的缩放  代码如下:  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
vue.draggable实现表格拖拽排序效果
10-17
在本文中，我们将深入探讨如何利用Vue.js框架中的vue.draggable组件来实现一个表格拖拽排序的效果。通过这个实现，我们能够提供一个交互性更强、用户体验更佳的界面。 首先，关于vue.draggable的实现原理，它依赖于...
js表格拖动排序
paolei的笔记
03-07 3871
原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！jquery.tablednd_0_5.js  非js库的js表格拖动代码  表格排序 <!-- function $(Id){return document.getElementById(Id);} var beginMoving = false; var tbid=new Arra
实现table表格可按行拖拽，按列排序，并可以保存排序后的结果
03-26
jquery +jquery.tablesorter+jquery.tablednd_0_5实现table表格可按行拖拽，按列排序，并可以保存排序后的结果
js实现table列头拖拽
10-19
js实现table列头拖拽，。。。。。。
js 实现 拖动表格行改变顺序
03-30
js 实现 拖动表格行改变顺序! 值得下载看看!资源免费,大家分享!!
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
04-17
JQ JS javascript 拖拽 排序功能 列表排序 菜单排序 表格排序
一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子
02-20
一个基于纯JavaScript实现表格列拖动、排序的功能的js类库源码及例子
js和jquery实现拖动表格的行进行排序
zzzgd_666的博客
07-03 4504
有些时候我们需要随意拖动表格的一行,进行简单的排序,这里就介绍一种只需要js和jquery就能实现的一种方式: 需要引入jquery和jquery ui的js文件 &lt;table id="sort" class="grid" title="Kurt Vonnegut novels"&gt; &lt;thead&gt; &lt;tr&gt;&lt;th cla
使用sortablejs 实现el-table的拖拽和排序
WEB_YH_coder的博客
01-04 715
按照id进行排序，必须在nextTick里面调用否则数据会发生错乱并且排序不生效。一定要在nextTick里面去做调用，否则有可能不生效。// 获取 el-table。
表格行拖动排序？element ui + vue + Sortable
最新发布
loserNo2的博客
04-25 408
表格拖拽操作安装Sortable在需要使用的地方引入Sortable。
Table Dragger - 简单的 JS 拖放排序表格插件
weixin_33748818的博客
11-16 442
　　Table Dragger是一个极简的实现拖放排序的表格插件，纯 JavaScript 库，不依赖 jQuery。用于构建操作方便的拖放排序功能，超级容易设置，有平滑的动画，支持触摸事件。 在线演示 免费下载 　 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果【附源码】 分享35个让人惊讶的 CSS3 动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值