手动拖动table的行来进行的排序

最新推荐文章于 2026-01-01 17:43:06 发布
原创 最新推荐文章于 2026-01-01 17:43:06 发布 · 315 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #border #javascript #html #button #input

本文介绍了一个使用JavaScript实现的简单表格拖拽排序功能。通过鼠标操作即可轻松调整表格行的位置，展示了基本的交互逻辑与实现方法。
  1. <html>  
  2.   
  3. <head>  
  4. <title>表格排序</title>  
  5.   
  6. <script language="javascript">  
  7. <!--   
  8. var beginMoving = false;   
  9.   
  10. function MouseDownToMove (obj)   
  11. {   
  12.     obj.style.zIndex = 1;   
  13.     obj.mouseDownY = event.clientY;   
  14.     obj.mouseDownX = event.clientX;   
  15.     beginMoving = true;   
  16.     obj.setCapture ();   
  17. }   
  18.   
  19. function MouseMoveToMove (obj)   
  20. {   
  21.     if(!beginMoving) return false;   
  22.   
  23.  for (i = 0; i < obj.cells.length; i ++)   
  24.      obj.cells [i].style.filter = "alpha(opacity = 70)";   
  25.     obj.style.top = (event.clientY - obj.mouseDownY);   
  26.     obj.style.left = (event.clientX - obj.mouseDownX);   
  27. }   
  28.   
  29. function MouseUpToMove (obj)   
  30. {   
  31.     if (!beginMoving) return false;   
  32.   
  33.     obj.releaseCapture ();   
  34.     obj.style.top = 0;   
  35.     obj.style.left = 0;   
  36.     obj.style.zIndex = 0;   
  37.     beginMoving = false;   
  38.   
  39.     var tempTop = event.clientY - obj.mouseDownY;   
  40.     var tempRowIndex = (tempTop - tempTop % 25) / 25;   
  41.   
  42.   
  43.     if (tempRowIndex + obj.rowIndex < 0 )   
  44.         tempRowIndex = -1;   
  45.     else   
  46.         tempRowIndextempRowIndex = tempRowIndex+obj.rowIndex;   
  47.   
  48.     if (tempRowIndex >= obj.parentElement.rows.length - 1)   
  49.         tempRowIndex = obj.parentElement.rows.length - 1;   
  50.   
  51.  for (i = 0; i < obj.cells.length; i ++)   
  52.      obj.cells [i].style.filter = "alpha(opacity = 100)";   
  53.     obj.parentElement.moveRow(obj.rowIndex, tempRowIndex);   
  54. }   
  55.   
  56. function FunTest ()   
  57. {   
  58.     for (i = 0; i < 8; i ++)   
  59.     {   
  60.         alert (document.getElementById ("TrID" + (i + 1)).rowIndex);   
  61.     }   
  62. }   
  63. //-->  
  64. </script>  
  65. </head>  
  66.   
  67. <body  bgcolor="cccccc">  
  68. 用鼠标移动TR<br>  
  69.  <table width="300" border="1" cellpadding="0" cellspacing="0">  
  70.   <tr id="TrID1" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  71.    <td bgcolor=blue>0</td><td bgcolor="#ffffff">0</td><td bgcolor="#ffffff">0</td>  
  72.   </tr>  
  73.   <tr id="TrID2" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  74.    <td bgcolor=black>1</td><td bgcolor="#ffffff">1</td><td bgcolor="#ffffff">1</td>  
  75.   </tr>  
  76.   <tr id="TrID3" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  77.    <td bgcolor=red>2</td><td bgcolor="#ffffff">2</td><td bgcolor="#ffffff">2</td>  
  78.   </tr>  
  79.   <tr id="TrID4" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  80.    <td bgcolor="#ffffff">3</td><td bgcolor="#ffffff">3</td><td bgcolor="#ffffff">3</td>  
  81.   </tr>  
  82.   <tr id="TrID5" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  83.    <td bgcolor="#ffffff">4</td><td bgcolor="#ffffff">4</td><td bgcolor="#ffffff">4</td>  
  84.   </tr>  
  85.   <tr id="TrID6" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  86.    <td bgcolor="#ffffff">5</td><td bgcolor="#ffffff">5</td><td bgcolor="#ffffff">5</td>  
  87.   </tr>  
  88.   <tr id="TrID7" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  89.    <td bgcolor="#ffffff">6</td><td bgcolor="#ffffff">6</td><td bgcolor="#ffffff">6</td>  
  90.   </tr>  
  91.   <tr id="TrID8" style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'>  
  92.    <td bgcolor="#ffffff">7</td><td bgcolor="#ffffff">7</td><td bgcolor="#ffffff">7</td>  
  93.   </tr>  
  94.  </table>  
  95.  <table width="300" border="1" cellpadding="0" cellspacing="0">  
  96.   <tr>  
  97.    <td colspan="3" align="center">  
  98.     <input type="button" name="BtnTest" value=" 测试 " onclick="FunTest ()">  
  99.    </td>  
  100.   </tr>  
  101.   <tr><td>aa</td></tr>  
  102.  </table>  
  103. </body>  
  104. </html>  
 
pc1024
关注
vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能，vue3 Table表格拖拽排序，表格每行使用鼠标拖动进行排序功能，表格拖拽排序实现（详细示例代码，一键复制开箱即用
高级前端工程师
03-23 1万+
vue3，elementPlus，el-table，typescript，表格组件，Table表格，表格拖动排序，表格拖曳排序，鼠标拖拽表格进行排序功能，elementplus表格如何实现拖动每行进行排序操作，表格拖动改变顺序，鼠标拖曳，表格内的数据项拖拽排序，vue3如何实现element-Plus表格组件进行表格内的数据项拖拽排序，列表拖拽排序效果，实现table动态拖拽，鼠标拖着排序，vue3 element Plus 表格拖曳拖动拖拽 排序，el-table拖拽排序实现，表格内容拖拽重新排序，树形表
vxe-table 实现任意列拖拽排序
chenhdowue的博客
12-12 1178
vxe-table 实现任意列拖拽排序；通过 column-drag-config.isToChildDrag 启用便捷拖拽成子节点，拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级。vxe-table 实现任意列拖拽排序，通过 column-drag-config.isCrossDrag 启用任意列拖拽排序，除了自身之外。启用后可以在不同表头直接任意拖拽，需要注意所有列必须有 field 属性。// 自己拖拽给自己的子级。// 显示辅助样式线。// 快捷键进入下级。
Excel手动排序中“手动”拖拽
weixin_46713695的博客
03-22 6477
手动排序
用鼠标拖动表格进行排序.
SmartJavaer的专栏
11-01 1080
用鼠标拖动表格进行排序.  var beginMoving=false;function MouseDownToMove(obj){ obj.style.zIndex=1; obj.mouseDownY=event.clientY; obj.mouseDownX=event.clientX; beginMoving=true; obj.setCapture();}function Mous
表格拖动排序(tr拖动排序)
沉闷萝卜的博客
06-24 2354
表格拖动排序
bootstrap中table的行拖拽实现
热门推荐
菜鸟笔记
01-12 3万+
在项目中遇到了bootstrap行拖拽的问题，查询了很多资料，终于实现了拖拽。 拖拽效果： 整理一下具体的实现方法： 1.首先在项目中引入需要的js，jQuery和Boostraptable的文件请自行引入 script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js">script>
iview 拖拽Table 表格实现手动排序
繁星
09-21 1865
最近有个对指定列表手动排序的需求，项目用的是iview组件，看看了看官方 API 好像没有这样的例子，本以为要凉凉，结果一百度，发现 iview 其实提供了相应的方法，只是没写出一个可以直接用的DEMO而已，以后看文档开始要多想想哪个和哪个可以组合到一起，不然就受限于官方API提供的DEMO，这样很不好！ 看看官方文档说了啥 ？！ 首先是 Table 的draggable 属性，官方API 里给出的解释是：是否开启拖拽调整行顺序，需配合 @on-drag-drop 事件使用 然后是@on-drag..
教程 vxe-table 实现点击按钮上下移动行排序
我的博客
04-25 945
实现步骤，通过调用 moveRowTo 移动到对应的行位置，来实现行排序功能。教程 vxe-table 实现点击按钮上下移动行排序。
vue中 el-table 实现拖拽排序教程
CC酱写前端的博客
05-28 8202
el-table基础上如何实现表格上下拖拽排序 element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。 实现步骤： 1.安装Sortable.js npm install --save sortablejs 2.在当前vue中JS代码中引入： import Sortable from ‘sortablejs’ 3.在当前vue文件template el-table中指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。 注意：需要注
VUE +el-table+sortable.js实现拖拽表格table排序，实现行排序，列排序(踩坑提醒)
MRSLLLL_的博客
12-03 1607
Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） 官方Demo：http://rubaxa.github.io/Sortable/ 安装步骤,注意安装的是sortablejs,别安装成其他的,也是不行的 npm install sortablejs --save 在.vue中的j
vxe-table行拖拽排序
11-07
- 引用[2]：明确说“vxe-table v4.8+ 实现拖拽行调整顺序、行拖动顺序调整排序”，这直接相关。 - 引用[3]：提到了列拖拽排序，但重点是列。 - 引用[4]：是关于点击按钮上下移动行排序，不是拖拽。 所以，最相关的...
手动排列文件夹顺序
777
08-15 9797
今天在这里再次分享一个比较鸡肋的技术，当然还是针对以前的XP老用户的一些习惯。 众所周知，Windows 7及以后系统的文件/文件夹默认是不允许手动排序的（桌面的除外）。默认排序是按照先数字，后字母排序的顺序，或者自己定义排序类型，这是因为windows 7 默认开启了全行选择功能，所以不能拖动文件/文件夹进行手动排序。 可是很多朋友都是从XP时代走过来的，已经习惯了XP模式下的随意拖拽排序文件功
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 156
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
JavaScript 静态模块声明（静态分析、动态导入）
Irene1991的博客
12-29 480
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
vue2 基于虚拟dom的下拉选择框，保证大数据不卡顿，仿antd功能和样式
licongmingli的博客
12-31 520
本文介绍了一个基于Vue2和Ant Design 1.7.8的虚拟列表下拉选择框组件的封装实现。由于Ant Design原生组件不支持虚拟列表功能，作者结合vue-virtual-scroller和vue-select封装了一个支持多选/单选/清除/搜索功能的选择框组件。文章详细说明了组件实现的技术难点：包括动态挂载DOM的方式解决模板渲染问题、样式适配Ant Design风格的改造过程，以及当前存在的待优化项（下拉列表脱离文档流问题）。组件通过计算属性和监听机制实现了数据同步，并提供了完整的代码示例展示核
A2A协议与LangChain.js实战：构建微型软件工厂
最新发布
Web分享
01-01 639
随着多智能体（Multi-Agent）系统的兴起，单纯的工具调用（Tool Use）已无法满足复杂协作需求。本文将探讨从 MCP（Model Context Protocol）到 A2A（Agent-to-Agent）协议的演进，解析去中心化智能体通信的设计模式，并利用 LangChain.js、Express 和 JSON-RPC 2.0 构建一个包含 PM、Dev、QA 的分布式“微型软件工厂”。
Vue3中v-if与v-show的本质区别及动态组件状态保持的关键策略是什么？
https://blog.cmdragon.cn/
12-30 957
特性v-ifv-showDOM存在与否销毁/重建始终存在切换成本高（销毁重建）低（改CSS）初始渲染成本低（不满足则不渲染）高（必渲染）适用场景切换频率低（如权限控制）切换频率高（如tab切换）
测试框架介绍：Jest、Mocha 等对比 ### 工程化与模块化
专注技术分享
12-31 284
本文对比了几种常见 JavaScript 测试框架。核心如 Jest 零配置，内置多功能；Mocha 灵活，可结合多库。创新在于不同框架特性适配不同场景。适用于前端项目测试，能提升代码质量与可维护性。建议 React、Vue 项目用 Jest，需灵活配置选 Mocha，小型项目可选 Tape 或 Jasmine，未来将注重性能与集成。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值