vue项目实现简单拖拽功能

使用 vuedraggable 插件实现拖拽排序功能

项目本地安装vuedraggable插件

npm install vuedraggable --save

安装成功后在package.json文件中会显示

具体的代码实现

<template>
  <div class="content">
    <draggable
      v-model="myArray"
      group="people"
      @change="change"
      @start="start"
      @end="end"
    >
      <div class="item" v-for="(itme, index) in myArray" :key="index">
        {{ itme }}
      </div>
    </draggable>
  </div>
</template>
 
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      myArray: ["一", "二", "三", "四", "五"],
    };
  },
  methods: {
    // 监听拖拽
    change(event) {
      console.log("change");
      console.log(event);
      console.log(this.myArray);
    },
    // 开始拖拽
    start(event) {
      console.log("start");
      console.log(event);
      console.log(this.myArray);
    },
    // 结束拖拽
    end(event) {
      console.log("end");
      // event.item  拖拽的本身
      // event.to      拖拽的目标列表
      // event.from    拖拽之前的列表
      // event.oldIndex    拖拽前的位置
      // event.newIndex    拖拽后的位置
      console.log(event);
      console.log(this.myArray);
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  .item {
    border: 1px solid #bbb;
    margin: 20px 0;
    width: 100px;
    padding: 5px;
    text-align: center;
  }
}
</style>

点击实现拖拽