Sortable在vue使用

一、npm安装

npm install sortablejs --save

官网参考

http://www.sortablejs.com/index.html

二、导入项目

  import Sortable from 'sortablejs';

或者直接下载源码导入

  // import Sortable from '@/plugins/Sortable.js';

    var that = this;
        setTimeout(function () {
          var el = document.getElementById('sub_items');
          this.sortable = Sortable.create(el,{onEnd: function (evt) {
              let itemEl = evt.item;
              let oldIndex = evt.oldIndex;
              let newIndex = evt.newIndex;
              let temp = that.subData[oldIndex];
              if( oldIndex < newIndex ){
                for(var i = oldIndex ; i < newIndex ; i++){
                  that.subData[i] = that.subData[i+1];
                }
              }else if( oldIndex > newIndex ){
                for(var i = oldIndex ; i > newIndex ; i--){
                  that.subData[i] = that.subData[i-1];
                }
              }
              that.subData[newIndex] = temp;
            },
          });
        },500)

效果