vuedraggable基础使用 实现拖拽上下换位

今天带大家看一个比较有趣的第三方控件 vuedraggable
我们先创建一个vue项目

还是先引入依赖

npm install vuedraggable

然后 我这里 就直接把内容 写 App.vue里了
参考代码如下

<template>
  <div class="main">
    排序
    <div>
      <draggable
        v-model="groups"
        @chang="change"
        @start="start"
        @end="end"
        :move="move"
      >
        <!-- <transition-group> -->
        <div v-for="(item, index) in groups" :key="index">item {{ item }}</div>
        <!-- </transition-group> -->
      </draggable>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "HelloWorld",
  components: {
    draggable,
  },
  data() {
    return {
      groups: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    change(event) {
      console.log("change", event);
    },
    start(event) {
      console.log("start", event);
    },
    end(event) {
      console.log("end", event, this.groups);
    },
    move(event, orgin) {
      console.log("move", event, orgin);
    },
  },
};
</script>

然后我们 就可以用鼠标 上下拖动元素 交换他们之间的位置

这里就带大家认识一下这东西 后续的还要靠大家自己去研究 必究 我也不可能把文档搬过来