Vue+SortableJS实现拖拽排序及置顶

sortable --- GitHub地址
sortable---Examples地址

1. 安装

npm install sortablejs --save-dev

2. 使用

<template>
        <ul class="list" id="list">
            <li v-for="(item,index) in items">
                <p>
                    <b>{{item.nm}}</b>
                    <em>{{item.enm}}</em>
                </p>
                <div class="btns">
                    <button class="btn_no" @click="btnUp(index)">
                        <i class="sprites_all sprites_up"></i>
                    </button>
                </div>
                <div class="btns btn_move">
                    <button class="btn_no">
                        <i class="sprites_all sprites_draw"></i>
                    </button>
                </div>
            </li>
        </ul>
</template>
<script>
    import Sortable from 'sortablejs'
    export default {
        data() {
            return {
                uwasc:true,
                idx:'1',
                items: [{
                    id:1,
                    nm: '澳元日元',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '-255%',
                    sel: false,
                }, {
                    id:2,
                    nm: '澳元日元1',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:3,
                    nm: '澳元日元2',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:4,
                    nm: '澳元日元3',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:5,
                    nm: '澳元日元4',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:6,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:7,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:8,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }, {
                    id:9,
                    nm: '澳元日元5',
                    enm: 'AUDJPY(2.6)',
                    price: 20.545,
                    up: '+255%',
                    sel: true
                }],
            }
        },
        mounted () {
            var $ul = this.$el.querySelector('#list')
            new Sortable($ul, {
                handle: '.btn_move', 
                animation: 150
            });
        },
        methods:{
            btnUp(index){
                var item = this.items[index];
                this.items.splice(index,1);
                this.items.unshift(item);
            },
        }
    }
</script>