vue中使用vuedraggable 实现拖拽排序

vue中使用vuedraggable 实现拖拽排序

安装:
yarn add vuedraggable
或
npm i -S vuedraggable

引入

<script>
import vuedraggable from 'vuedraggable';
export default {
  components: {vuedraggable},
}
</script>

使用:

<template>
  <vuedraggable class="wrapper" v-model="list">
    <transition-group>
      <div v-for="item in list" :key="item" class="item">
        <p>{{item}}</p>
      </div>
    </transition-group>
  </vuedraggable>
</template>

data(){
   return{
      list: [1,2,34,4,54,5]
   }
 }, 
updated() {
   console.log(this.list)
},

<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item{
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
}
</style>