关于拖拽:拖拽插件sortablejs之eltable表格拖拽效果代码
问题形容Sortable.js是一款优良的js拖拽库，因为是原生js写的，所以性能不错，也反对挪动端哦。本文举两个案例来学习一下。 案例一 简略拖拽效果图 代码附上对于了解看正文哦，运行的话复制粘贴即可 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>sortable.js拖动例子</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!-- 引入插件 --> <script src="https://www.itxst.com/package/sortable/sortable.min.js"></script> <style> #wrapBox { width: 360px; /* 拖动容器的高度，由拖动项的高度撑开 */ height: auto; } #wrapBox div { padding: 8px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; /* 增加鼠标悬浮款式为挪动的款式，要不然不难看 */ cursor: move; font-size: 13px; } /* 设置鼠标按下时候的款式，加了难看些 */ #wrapBox div:active { background-color: #eee; } </style></head><body> <h2>优先扣款程序：</h2> <!-- 一般来说，拖动的构造就是：外边一个拖动容器，外面是一个又一个的拖动项 --> <div id="wrapBox"> <div data-id="1工商银行">工商银行</div> <div data-id="2建设银行">建设银行</div> <div data-id="3中国银行">中国银行</div> <div data-id="4农业银行">农业银行</div> <div data-id="5交通银行">交通银行</div> </div> <script> //第一步，获取拖动容器 var wrap = document.getElementById('wrapBox'); //第二步，设置拖动项的拖动规定 var rules = { animation: 500, // 拖动时的元素的地位变动的动画时长， //拖动完结后的回调函数 onEnd: function (event) { console.log('参数是拖动事件对象', event); //获取拖动后容器中的每一项的地位排序 var arr = sortable.toArray(); console.log('地位排序', arr); }, }; //第三步，初始化 --> 给拖动容器增加拖动规定 var sortable = Sortable.create(wrap, rules); /** * 插件自带的办法： * 1. sortable.toArray() 获取序列化后的每个item元素的id属性的数组 * 2. Sortable.create(wrap, rules) 给拖动容器增加拖动规定 * */ </script></body></html>案例二 el-table表格拖拽这里有一个细节，就是表头数据拖动的时候，可能导致渲染数据不对的问题，有的博主是搞两个表头数组数据的，其实也是一种解决问题的计划。不过集体愚见略有麻烦，其实一个表头数组数据即可。只有及时清空，从新赋值即可 ...