vue 拖拽互换位置

安装:

npm i -S vuedraggable

页面使用:

<template >
  <div class="draggable">
    <draggable v-model="list">
      <div v-for="(item,index) in list" :key="index" class="list">{{item.name}}</div>
    </draggable>
    <div @click="pushData">新增</div>
  </div>
</template>

<script>


import draggable from "vuedraggable"; //拖动插件

export default {
  name: 'system-user',
  data () {
    return {
      list:[{name:66666},{name:77777}]
    }
  },
  methods:{
    pushData(){
      let list = this.list;
      list.push({name:8888})
      this.list = list
    }
  },
  components:{
     draggable,
  }
}
</script>



<style lang="stylus" scoped>
.list {
  border: 1px solid red;
  height: 70px;
}
</style>