使用HTML5拖拽实现表格列移动

纯前端的移动,不重载数据,不支持换页和数据刷新

实现代码,调用在表格加载完成之后

function add_drag_th(){//允许放入  $("#callGrid tr>th").on("dragover",function(e){  e.originalEvent.preventDefault();  });//拿起$("#callGrid tr>th").on("dragstart",function(e){  e.originalEvent.dataTransfer.setData("obj_add",e.currentTarget.cellIndex);  });//放下$("#callGrid tr>th").on("drop",function(e){  e.originalEvent.preventDefault;  var i = parseInt(e.originalEvent.dataTransfer.getData("obj_add"));//所拿起的th列下标  var d = this.cellIndex;//被放入的列下标var _t = this;$("#callGrid tr>th").each(function(){var j = this;if(j.cellIndex == i){_t.before(j);return false;}});$("#callGrid tbody>tr").each(function(){var drag = "";//拿起的tdvar drop = "";//放下的td$(this).children().each(function(){if(this.cellIndex == i){drag = this;}if(this.cellIndex == d){drop = this;}});if(drag != undefined && drop != undefined && drag != "" && drop != ""){drop.before(drag);}});});}

效果

使用HTML5拖拽实现表格列移动相关推荐

html5拖拽实现拼图,HTML5技术之图像处理：一个滑动的拼图游戏
HTML5有许多功能特性可以把多媒体整合到网页中.使用canvas元素可以在这个空白的画板上填充线条,载入图片文件,甚至动画效果. 在这篇文章中,我将做一个滑动拼图的游戏用来展示HTML5 canva ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
FullCalendarDemo5 控件的实例讲解—拖拽实现值班排班(五)
FullCalendarDemo5 控件的实例讲解-拖拽实现值班排班(五) (五)c# asp.net 操作FullCalendarDemo5 导出排班记录目的:点击导出按钮,弹出参数指定对话框,选 ...
html5简单拖拽实现自动左右贴边+幸运大转盘
此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到效果如图: 在网上找了很多移动端拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是 ...
HTML5 元素拖拽实现及 jquery.event.drag插件
如上图片: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" co ...
HTML5垃圾桶效果,Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
效果参考教程: W3school: 菜鸟教程: 关键知识点: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondra ...
html表格列拖拽,table表格列顺序拖拽和列宽度拖拽
目前项目要求对表格可进行宽度拖拽和排序拖拽.用的第三方库库ant-desigin-vue. 对于列宽度拖拽在ant-desigin-vue的table示例中有对应的案例,但是直接复制代码,会报错.最 ...
Silverlight中的拖拽实现的图片上传---1
在Silverlight中因为可以直接从系统的文件夹里面拖出来一个文件直接放到浏览器中,我在想使用这个功能来做成图片上传(或者文件上传),这样的用户体验将会是非常好的. 传统的上传都是打开对话框,选择 ...
Html轻松使用拖拽实现垃圾桶，代码带注释，包你能看懂
效果参考教程: W3school: http://www.w3school.com.cn/html5/html_5_draganddrop.asp 菜鸟教程: http://www.runoob.c ...

使用HTML5拖拽实现表格列移动

使用HTML5拖拽实现表格列移动相关推荐

最新文章

热门文章