js和layerjs配合实现的拖拽表格列

前几天想着实现表格列的拖拽写了个例子一直不完美经过修改感觉还算完美了

拖拽过程不会复制文字并且还能实现layerjs本身自带的表格排序功能。

1、首先引入layer.css jquery layui.all.js

2、布局页面

<div  class="divT">    <table class="layui-hide" id="test" lay-filter="test"></table></div>

3、写拖拽的代码

最终实现的效果为进入页面是这样的

按住表格头移动到需要的位置放手即可

其中实现排序的需要修改一下layerjs的源码

转载于:https://www.cnblogs.com/wdd-cindy/p/9087693.html

js和layerjs配合实现的拖拽表格列相关推荐

HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
可拖拽表格列组件（可以禁止拖动列如序号）
使用组件时需要安装sortablejs $ npm install sortablejs --save 组件 <template> <el-table ref="dragT ...
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
移动html触摸效果,JS实现移动端触屏拖拽功能
2.css 3.js = maxW) { oLeft = maxW; } if(oTop < 0) { oTop = 0; } else if(oTop >= maxH) { oTop = ...
html 手机端拖拽效果,JS实现移动端触屏拖拽功能
1.html 2.css * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } #div1 { width: 5 ...
highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表实现例子基于vue来实现,如果是j ...
【JS案例】：实现盒子拖拽功能
JS小案例:实现盒子拖拽功能 HTML部分: <div id="box"></div> CSS部分: #box{width: 100px;height: 1 ...
iview table 自定义列_案例 | iview中Table：拖拽适配列、自定义固定列、合并行
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing ❥❥❥❥点个赞,让我知道你来过~❥❥❥❥ 0 / 更新Table "iview": &quo ...
Ant Design + react-drag-listview实现Table拖拽变换列位置
Ant Design + react-drag-listview实现Table拖拽变换列位置 Ant Design + react-drag-listview + react-resizable 实现 ...

js和layerjs配合实现的拖拽表格列

js和layerjs配合实现的拖拽表格列相关推荐

最新文章

热门文章