在vue中实现DOM元素拖拽进行位置替换

在vue中实现DOM元素拖拽进行位置替换

• 首先要下载 vuedraggable
  npm i vuedraggable --save
• 引入并注册

import draggable from "vuedraggable";
components: {
  draggable,
},

• 具体使用代码

<template>
  <div >
    <draggable
      v-model="myArray"
      group="people"
      @change="change"
      @start="start"
      class="grid-container"
      @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 {
  name: 'index',
  data() {
    return {
      myArray: ["行一", "行二", "行三","行四","行五","行六"],
    };
  },
  components: {
  draggable,
},
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>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  .item{
    width: 100%;
    height: 200px;
    background-color: rgb(196, 160, 232);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: 200px;
    text-align: center;
  }
}
</style>