vue中如何實現(xiàn)拖拽調(diào)整順序功能

更新時間：2023年05月18日 09:56:47 作者：樹洞菇?jīng)?

這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue實現(xiàn)拖拽調(diào)整順序功能

使用vuedraggable是標準的組件式封裝

或 vue-dragging 指令方式實現(xiàn)拖拽調(diào)整順序功能。

1：安裝依賴

npm install vuedraggable

或

yarn add vuedraggable

2：使用全局注冊或者哪個頁面使用就引入哪個頁面也可。

import vuedraggable from 'vuedraggable'

在使用時，可通過 v-model 來雙向綁定本地 data，如果需要更新或者是觸發(fā)父組件監(jiān)聽的事件，可以在 updated() 中去 emit。

引入后直接聲明該組件然后使用即可，示例代碼：

<template>
? <vuedraggable class="wrapper" v-model="list">
? ? <transition-group>
? ? ? <div v-for="item in list" :key="item" class="item">{{item}}</div>
? ? </transition-group>
? </vuedraggable>
</template>
<script>
import vuedraggable from 'vuedraggable';
export default {
? name: 'Index',
? components: {
? ? vuedraggable
? },
? props: {},
? data() {
? ? return {
? ? ? list: [1,2,34,4,54,5]
? ? }
? },
? updated() {
? ? console.log(this.list)
? },
? methods: {
? }
}
</script>
<style scoped lang="scss">
.wrapper {
? display: flex;
? justify-content: center;
? width: 100%;
? .item{
? ? ? width: 300px;
? ? ? height: 50px;
? ? ? background-color: #42b983;
? ? ? color: #ffffff;
? }
}
</style>

vue-dragging的npm包的名字是awe-dnd

并不是 vue-dragging，這個庫的特點是封裝了 v-dragging 全局指令，然后通過全局指令去數(shù)據(jù)綁定等。

與vuedraggable相比，awe-dnd沒有雙向綁定，因此提供了事件，在拖拽結束時用來更新列表或去觸發(fā)父組件監(jiān)聽的事件。

1：安裝依賴

npm install awe-dnd --save

或

yarn add awe-and

項目中main.js 文件

import VueDND from 'awe-dnd'
Vue.use(VueDND);
<template>
? <div class="color-list">
? ? ? <div
? ? ? ? ? class="color-item"
? ? ? ? ? v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
? ? ? ? ? :key="color.text"
? ? ? >{{color.text}}</div>
? </div>
</template>
<script>
export default {
? data () {
? ? return {
? ? ? ? colors: [{
? ? ? ? ? ? text: "Aquamarine"
? ? ? ? }, {
? ? ? ? ? ? text: "Hotpink"
? ? ? ? }, {
? ? ? ? ? ? text: "Gold"
? ? ? ? }, {
? ? ? ? ? ? text: "Crimson"
? ? ? ? }, {
? ? ? ? ? ? text: "Blueviolet"
? ? ? ? }, {
? ? ? ? ? ? text: "Lightblue"
? ? ? ? }, {
? ? ? ? ? ? text: "Cornflowerblue"
? ? ? ? }, {
? ? ? ? ? ? text: "Skyblue"
? ? ? ? }, {
? ? ? ? ? ? text: "Burlywood"
? ? ? ? }]
? ? }
? },
}
</script>

可以發(fā)現(xiàn)綁定時 v-dragging="{ item: color, list: colors, group: 'color' }" 這種形式進行指令綁定，其中 item 就是單個對象，而 list 則是數(shù)據(jù)列表，group 則是用來聲明一個組，來保證可以在一個頁面中進行多個數(shù)據(jù)源的操作。

而提供的兩個事件方法如下：

export default {
? mounted () {
? ? this.$dragging.$on('dragged', ({ value }) => {
? ? ? console.log(value.item)
? ? ? console.log(value.list)
? ? ? console.log(value.otherData)
? ? })
? ? this.$dragging.$on('dragend', (res) => {
? ? ? ? console.error(res);
? ? })
? }
}

一般使用的方法就是：

this.$dragging.$on('dragend', (res) => {
? ?console.error(res);
})

vue拖拽排序功能（vuedraggable）

vuedraggable 中文文檔： https://www.itxst.com/vue-draggable/tutorial.html

效果展示

實現(xiàn)步驟

1.安裝依賴

npm install vuedraggable --save

2.組件中引入

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

3.組件中使用

<template>
  <div>
    <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: {
    // 監(jiān)聽拖拽
    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>
.item {
  border: 1px solid #bbb;
  margin: 10px;
  width: 100px;
  padding: 5px;
}
</style>