vue 关于列表拖拽排序、draggable

第一步
1、安装draggable插件

npm i vuedraggable --save

第二步
直接复制代码即可应用，纵享丝滑搬流畅

<template>
  <div>
    <h2>纵享丝滑</h2>
    <div>{{ list }}</div>
    <section class="content">
      <!-- animation: 拖动动画时长(越小越快)-->
      <draggable
        v-model="list"
        animation="400"
        :move="move"
        @chang="change"
        @start="start"
        @end="end">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="list">
          {{ item }}
        </div>
      </draggable>
    </section>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
export default {

  components: { draggable },
  data() {
    return {
      list: ['1', '2', '3', '4', '5', '6']
    };
  },

  methods: {
    change(event) {
      console.log('change');
    },
    start(event) {
      console.log('开始拖动');
    },
    move(event, orgin) {
      console.log('已改变位置');
    },
    end(event) {
      console.log('拖动结束');
    }
  }
};
</script>

<style scoped>
/* 根据您的需求更改样式即可 */
.content {
  width: 90%;
  height: 100%;
  overflow: scroll;
  padding: 20px;
}
.list {
  background: grey;
  padding: 20px;
  margin-bottom: 15px;
  cursor: move;
  border-radius: 10px;
}
</style>