列拖拽顺序调整-sortable.js使用

最近在做一个单表统计功能，涉及到一个查询列配置，但是查询出来的列顺序，可以进行配置，通过写列的排序当然阔以，但是方法就不美丽了。所以，在网上搜了一下拖拽的组件，最终定位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