最近在做一個單表統計功能，涉及到一個查詢列配置，但是查詢出來的列順序，可以進行配置，通過寫列的排序當然闊以，但是方法就不美麗了。所以，在網上搜了一下拖拽的組件，最終定位Sortable.js,簡單易用。
github地址：https://github.com/wuzhiaite/vue-samples
1.引入Sortable.js
Sortable.js的官網地址：http://www.sortablejs.com/
github地址：https://github.com/SortableJS/Sortable/blob/master/tests/handles.html
因為我是PHP上寫vue, SO,只能用原始的script引入；當然Storable也提供了npm安裝的方法；
$ npm install sortablejs --save OR <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>
2.使用
在開始寫拖動的代碼之前有幾點要注意的：
1.一般使用，<ul><li></li></ul>這種標簽組合，所以傳統的<table></table>要調整成 ul 和 li 組合的這種形式；
2.就vue項目來說，Sortable實例需要在mounted方法中初始化；
3.拖動后，原先的數組的數據順序是不會隨着改變的，所以要自己手動操作，改變數組中的順序；當然，Sortable也提供了相關的API，進官網康康，so easy !!!
API地址：http://www.sortablejs.com/options.html
樣例：
移動之前：
移動之后：
下面的兩個按照順序向上移動。
樣例代碼如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手動拖動列表調整位置</title> <style type="text/css"> </style> </head> <body> <div id="app"> <div class="table-head table-croll"> <ul class="croll" style="cursor:Default;"> <li>姓名</li> <li>愛好</li> <li>年齡</li> <li>以及等等</li> </ul> </div> <div id="items" class="table-croll"> <ul v-for="(item,index) in list" class="croll"> <li> {{item.name}} </li> <li> {{item.love}} </li> <li> {{item.age}} </li> <li> {{item.wait}} </li> </ul> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:function(){ return { list:[], sortable:{} } }, created(){ this.loadData(); }, mounted(){ var that = this; var el = document.getElementById('items'); this.sortable = Sortable.create(el,{//移動后的操作 onEnd: function (/**Event*/evt) { let itemEl = evt.item; // dragged HTMLElement let oldIndex = evt.oldIndex; let newIndex = evt.newIndex; let temp = that.list[oldIndex]; if( oldIndex < newIndex ){//向下移動調整順序 for(var i = oldIndex ; i < newIndex ; i++){ that.list[i] = that.list[i+1]; } }else if( oldIndex > newIndex ){//向上移動時調整順序 for(var i = oldIndex ; i > newIndex ; i--){ that.list[i] = that.list[i-1]; } } that.list[newIndex] = temp; console.log(that.list); }, }); }, methods:{ loadData(){ this.list = [ { name:'zhangsan', love:'ball', age:11, wait:'我就是等等' }, { name:'lisi', love:'bigball', age:11, wait:'我就是等等' }, { name:'wangwu', love:'bigbigball', age:11, wait:'我就是等等' }, { name:'lily', love:'smallball', age:11, wait:'我就是等等' } ]; } } }) </script> <style> .table-head{ background-color: #EEF4FF; color: #333333; font-weight: normal; font-size: 13px; font-family: '微軟雅黑'; border: none; padding: 12px 15px; text-align:left !important; } .table-croll{ display:table; padding:0px; width:100%; } .croll { display:table-row; list-style: none; height: 55px; width:100%; border-top: 0px; font-size: 13px; color: #333333; cursor:move; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; line-height:50px; text-align:left ! important; } .croll li { display:table-cell ; float: left; width:20%; text-indent: 2em; list-style-type:none; height:50px; padding-left:5px; overflow:hidden; white-space:nowrap; vertical-align: middle; } .croll:nth-of-type(even){ background:#f0f3f6;} </style> </body> </html>
至此，一個簡單的拖動換行的功能就實現了，Sortable.js的功能還是很強大的，具體的使用可以翻翻相關的API