vue vuedraggable 拖拽组件

安装插件

yarn add vuedraggable

<template>

    <draggable v-model="dataList" @update="draggableEnd">

        <transition-group class="display-flex flex-wrap-wrap">

            <div v-for="itemin dataList" :key="item" class="item-class">

                <div v-text="item"></div>

            </div>

        </transition-group>

    </draggable>

</template>

<script>

import draggable from 'vuedraggable';

export default{

  name: 'ClassMeeting',

  components: {draggable},

  props: {},

  data() {

    return{

      dataList: ['张三','李四','王武','张怡宁','刘诗雯']

    }

  },

  methods: {

    draggableEnd(e) {

      console.log("拖动前的索引 :" + e.oldIndex);

      console.log("拖动后的索引 :" + e.newIndex);

    },

  }

}

</script>

.item-class{

  width: 300px;

  height: 50px;

  line-height: 50px;

  background-color: #0077aa;

  color: #ffffff;

  margin-right: 5px;

  margin-top: 5px;

}

</style>