使用tableDnD实现表格拖拽排序功能

最新推荐文章于 2024-04-11 12:07:48 发布
最新推荐文章于 2024-04-11 12:07:48 发布
阅读量755 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rec_Mervyn/article/details/103031913
版权

今天做项目需要用到拖拽调整排序的功能。
做个使用tableDnD插件实现的记录。
tableDnD插件Github

放个demo代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Table拖拽测试</title>
	<style>
		.highlight {
    
			background-color: darkgray;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="jQuery.tablednd.js"></script>
	<script type="text/javascript">
		$(function(){
    
			$("#tableId").tableDnD({
    
				//拖拽时的样式
				onDragClass:'highlight',
				//开始拖拽回调函数
	            onDragStart:function(table,row){
    
	            	console.log('onDragStart');
	            },
	            //拖拽排序完成后回
最低0.47元/天 解锁文章
MervynLammm
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TableDnD：jQuery插件，用于拖放HTML表中的行
02-03
表格 安装 TableDnD易于安装： npm install --save tablednd 要么 yarn add tablednd 要么 bower install https://github.com/isocra/TableDnD.git 或者，您可以简单地从CDNJS进行引用： < script src =" https://cdnjs.cloudflare.com/ajax/libs/TableDnD/0.9.1/jquery.tablednd.js " integrity =" sha256-d3rtug+Hg1GZPB7Y/yTcRixO/wlI78+2m08tosoRn
tableDnD 实现table 行拖拽
Vein Cook
05-24 1712
首先需要把该插件导入,路径按照你的相对路径进行填写. $(document).ready(function(){  $("table").tableDnD({ //在table节点上进行操作.也可绑定到相应的id或者class上,          onDrop:function(table,row){//这是拖拽之后执行的函数....我个人理解是触发了该事件.... //  alert
表格实现拖拽排序
最新发布
m0_51181022的博客
04-11 350
例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。前端业务开发中，遇到这样的场景，对表格进行拖拽排序，拖动表格行到指定位置，实现对表格的排序。对于网站、扩展以及XUL应用程序，你可以定义什么元素是可拖拽的、可拖拽元素产生的反馈类型，以及可放置的元素。**注意：**当从操作系统向浏览器中拖拽文件时，不会触发。遵循Vue jsx语法。
html表格列拖动插件,TableDnd(JQuery报表拖拽控件)应用进阶
weixin_39911916的博客
06-10 731
TableDnd(JQuery表格拖拽控件)应用进阶在上一篇文章一个很好用的JQuery Table拖拽控件中，介绍了TableDnD这个强大的控件，目前是我博客浏览次数最多的文章……现在再简单介绍一下他的应用吧：在之前文章里介绍了，使用时很方便：$("#table").tableDnD();下面就介绍几个实用的选项：1.onDragClass(onDragStyle)：拖拽时样式，我们在拖拽一个...
两个table的td拖拽
雩风季白的博客
07-20 289
业务背景为 table布局模板的页面开发
实现boostrap表格td宽度可自由拖动。
07-28
实现boostrap表格td宽度可以自由拖动。简单易用，内含源代码
vue.draggable实现表格拖拽排序效果
01-19
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 npm install vuedraggable npm install sortablejs 2...
表格拖动排序插件TableDnD
06-01
表格每一行都可拖动，并且可以控制是否可以拖动
Java实现拖拽列表项的排序功能
08-31
主要介绍了Java实现拖拽列表项的排序功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
php接口实现拖拽排序功能
10-18
列表拖拽排序是一个很常见的功能,在后端接口处理中经常会用到，今天小编给大家带来了php接口实现拖拽排序功能，感兴趣的朋友一起看看吧
tableDnD实现table里行的拖拽排序
谦进
08-25 7589
tableDnD是一个能使table里的行能拖动排序的插件。这个插件的主页在Github上，用谷歌去查，百度一下，你什么都不会知道。使用这个插件也很简单，直接给table节点绑定这个插件就行了。
表格td边框可左右拖动的实例
06-30
当显示的table宽度受限制固定宽度时，表格的展示列又很多的时候，如何更好地处理并展示，可下载资源查看，可拖动表格，表格可左右拖动，表格td边框可以左右拖动，表格里的内容可以很好的显示。
任意改变table表格td的宽度 支持表格TD拖拽
09-01
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
tableDnD完整实现表格行的拖动
07-17
tableDnD完整实现表格行的拖动，并显示数据的变化
JQuery-tableDnD 拖拽的基本使用介绍
12-11
在页面上导入js 代码如下:jquery-1.3.2.min.jsjquery.tablednd_0_5.js注意：一定要先导入jquery-1.3.2.min.js 否则出错。·建table 代码如下:<table id=”table-1″ cellspacing=”0″ cellpadding=”2″>    <tr id=”1″><td>1</td><td>One</td><td>some text</td></tr>    <tr id=”2″><td>2</td><td>Two</td><td>some text</td></tr>    <tr id=”3″><td>3</td>
tablednd保存 php,TableDnD-JavaScript中文网-JavaScript教程资源分享门户
weixin_39861920的博客
03-21 85
TableDnD是什么什么是TableDnD，jQuery plug-in to drag and drop rows in HTML tablesTableDnD官网：官网TableDnD文档：文档TableDnD源码仓库：源码仓库TableDnD下载地址：点此下载 点此下载2TableDnD介绍、TableDnD使用InstallationTableDnD is easy to install...
table tr 拖动排序插件jquery.tablednd.js
快乐向日葵
07-30 2159
&lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="http://isocra.com/js/jquery.tablednd.js"&gt;&lt;/script&gt; &a
html 拖拽选择表格,实例：使用jQuery插件TableDnD拖放HTML表(table)行
weixin_35682010的博客
06-03 600
HTML表(table)是显示数据的首选UI选项，排序、分页和搜索/过滤是具有大量数据的任何HTML表的必备功能，这些功能使HTML表格对最终用户而言更加友好且高效。在某些情况下，可能需要HTML表行的拖放功能，不幸的是，jQuery本身并不具备这个功能。为了实现这一点，我们需要使用一个名为TableDnD的jQuery插件。在这篇文章中，我们将学习如何使用jQuery插件TableDnD实现拖放...
jquery 拖动排序插件tableDnD
dly120219891208的专栏
03-18 2757
table拖拽排序并保存数据库 ①：引入jquery.js以及 ②：在页面每一行后面加入原始数据的id和显示顺序 initSeqArray.push("${id}_${showSeq}"); ③：在页面上添加保存拖拽后保存顺序的按钮 为每一条记录的tr添加id ③：初始化插件 var initSeqArray = new Array(); va
js实现excel表格拖拽排序
05-26
要实现表格的拖拽排序，可以使用以下步骤： 1. 给表格中需要排序的行添加拖拽事件监听器。 2. 在拖拽开始时，记录被拖拽的行的索引。 3. 在拖拽过程中，使用一些视觉效果（比如改变背景颜色）来提示用户当前处于哪一行。 4. 在拖拽结束时，将被拖拽的行移动到目标位置，并更新表格数据。 下面是一个简单的实现示例： HTML： ```html <table id="sortable-table"> <thead> <tr> <th>名称</th> <th>数量</th> <th>价格</th> </tr> </thead> <tbody> <tr><td>苹果</td><td>10</td><td>5</td></tr> <tr><td>香蕉</td><td>15</td><td>3</td></tr> <tr><td>橙子</td><td>8</td><td>4</td></tr> <tr><td>梨子</td><td>12</td><td>6</td></tr> </tbody> </table> ``` JavaScript： ```javascript // 获取表格元素 const table = document.getElementById('sortable-table'); // 获取所有可拖拽的行 const rows = table.tBodies[0].rows; // 记录被拖拽的行的索引 let draggingIndex = -1; // 给所有可拖拽的行添加事件监听器 for (let i = 0; i < rows.length; i++) { const row = rows[i]; // 记录当前行的索引 row.draggingIndex = i; // 添加拖拽事件监听器 row.addEventListener('dragstart', e => { // 记录被拖拽的行的索引 draggingIndex = e.target.draggingIndex; // 设置拖拽效果 e.dataTransfer.effectAllowed = 'move'; // 设置拖拽数据 e.dataTransfer.setData('text/html', row.innerHTML); }); // 添加拖拽过程中的事件监听器 row.addEventListener('dragover', e => { // 阻止默认行为，使得drop事件能够触发 e.preventDefault(); // 设置拖拽效果 e.dataTransfer.dropEffect = 'move'; // 获取当前鼠标所在的位置 const y = e.clientY - table.offsetTop; // 遍历所有行，找到当前鼠标所在的位置应该插入的位置 for (let j = 0; j < rows.length; j++) { const row = rows[j]; if (y > row.offsetTop && y < row.offsetTop + row.offsetHeight) { // 如果拖拽的行和目标行不是同一行，则交换位置 if (draggingIndex !== j) { table.tBodies[0].insertBefore(rows[draggingIndex], j > draggingIndex ? rows[j] : rows[j + 1]); break; } } } }); // 添加拖拽结束的事件监听器 row.addEventListener('dragend', e => { // 重置被拖拽的行的索引 draggingIndex = -1; }); } ``` 在这个示例中，我们使用了HTML5的拖拽API来实现表格的拖拽排序。在拖拽过程中，我们通过改变被拖拽的行和目标行的位置来实现排序。需要注意的是，这个示例只是一个简单的实现，如果需要支持更复杂的排序方式，比如拖拽多个行或者跨页排序，还需要进行更多的功能扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值