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

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

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

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

使用vuedraggable是標(biāo)準(zhǔn)的組件式封裝

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

1：安裝依賴(lài)

npm install vuedraggable

或

yarn add vuedraggable

2：使用全局注冊(cè) 或者哪個(gè)頁(yè)面使用就引入哪個(gè)頁(yè)面也可。

import vuedraggable from 'vuedraggable'

在使用時(shí)，可通過(guò) v-model 來(lái)雙向綁定本地 data，如果需要更新或者是觸發(fā)父組件監(jiān)聽(tīng)的事件，可以在 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，這個(gè)庫(kù)的特點(diǎn)是封裝了 v-dragging 全局指令，然后通過(guò)全局指令去數(shù)據(jù)綁定等。

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

1：安裝依賴(lài)

npm install awe-dnd --save

或

yarn add awe-and

項(xiàng)目中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)綁定時(shí) v-dragging="{ item: color, list: colors, group: 'color' }" 這種形式進(jìn)行指令綁定，其中 item 就是單個(gè)對(duì)象，而 list 則是數(shù)據(jù)列表，group 則是用來(lái)聲明一個(gè)組，來(lái)保證可以在一個(gè)頁(yè)面中進(jìn)行多個(gè)數(shù)據(jù)源的操作。

而提供的兩個(gè)事件方法如下：

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

效果展示

實(shí)現(xiàn)步驟

1.安裝依賴(lài)

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)聽(tīng)拖拽
    change(event) {
      console.log("change");
      console.log(event);
      console.log(this.myArray);
    },
    // 開(kāi)始拖拽
    start(event) {
      console.log("start");
      console.log(event);
      console.log(this.myArray);
    },
    // 結(jié)束拖拽
    end(event) {
      console.log("end");
      // event.item  拖拽的本身
      // event.to      拖拽的目標(biāo)列表
      // 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>