ドラッグ＆ドロップソートプラグインを使用します.js

SortableはJavaScriptライブラリで、現代のブラウザやタッチデバイス上でドラッグアンドドロップリストを並べ替えるために使用されます.jQueryは不要です.Meteor、AngularJS、React、Polymer、Vue、Knockout、BootstrapなどのCSSライブラリをサポートします.
中国語ドキュメント:http://www.sortablejs.com/
インストール方式:npmインストール、bowerインストール、script導入はすべて可能で、本文はscript方式導入を採用する
オンラインdemo:https://my.weblf.cn/alone_page/pages/sorttablejs.html
コード:

    
    
    
    
    
    
    
    
    
    




    

        
        

                  Sortable.js
             
        
        
        

            

                

                    
{{item.nm}}
                
            
            
    ：
            
                {{item.nm}}、
            
        

        
    



    var vm = new Vue({
        el: '#app',
        data: {
            showSpinner: false,
            isWeiXin: window.TS_WEB.isWeiXin,
            items: [{
                id: 1,
                nm: '  0'
            }, {
                id: 2,
                nm: '  1'
            }, {
                id: 3,
                nm: '  2'
            }, {
                id: 4,
                nm: '  3'
            }]
        },
        components: {},
        computed: {},
        methods: {

        },
        created() {

        },
        mounted() {
            var _this = this;
            var $ul = this.$refs.list
            new Sortable($ul, {
                onUpdate: function (event) {
                    //  items    
                    var newIndex = event.newIndex,
                        oldIndex = event.oldIndex,
                        $li = $ul.children[newIndex],
                        $oldLi = $ul.children[oldIndex];
                    //         
                    $ul.removeChild($li)
                    //              ，        
                    if (newIndex > oldIndex) {
                        $ul.insertBefore($li, $oldLi)
                    } else {
                        $ul.insertBefore($li, $oldLi.nextSibling)
                    }
                    //   items  
                    var item = _this.items.splice(oldIndex, 1)
                    _this.items.splice(newIndex, 0, item[0])
                    //    tick   patch  
                },
                animation: 150,
            })
        },
    })

結果: