Vue.Draggable實現(xiàn)交換位置

更新時間：2022年04月07日 09:37:20 作者：Landing...

這篇文章主要為大家詳細介紹了Vue.Draggable實現(xiàn)交換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue.Draggable實現(xiàn)交換位置，供大家參考，具體內(nèi)容如下

前言

最近的一個項目接觸了到了Vue.Draggable這個組件。不過我們的需求和Vue.Draggable這個組件所支持的有些出入。這個拖拽組件屬于插入的模式。一但拖拽的是相間的元素（中間隔著幾個元素），那么拖拽元素就會占據(jù)被拖拽元素的位置，而后續(xù)元素位置逐級向下減一。

如下圖：

c拖拽到a的位置，表現(xiàn)為c插入到a的前面。所以變?yōu)榱薱ab。

需求

實現(xiàn)交換而非插入及上圖要變成（cba）

實現(xiàn)方式

想要阻止它插入是不可能，我們只能等它插入結(jié)束后對我們想要的元素進行操作。比如拿到頭和尾部兩個索引。交換他們在數(shù)組中的位置。需要注意的是，因為拖拽時已經(jīng)改變數(shù)組里面元素的位置了，因此我們需要在拖拽前copy一個和原數(shù)組一樣的數(shù)組。

實現(xiàn)步驟

1、選擇一個適合自己的方法，需要能夠獲得開始索引和結(jié)束索引
end，sort，update都可以

2、深拷貝

copyList(){
? ?this.copyList=this.list.slice(0)
}

3、通過索引來操作copyList數(shù)組位置

const item=this.copyList[oldIndex]
this.copyList.splice(oldIndex, 1, this.copyList[newIndex]);
this.copyList.splice(newIndex, 1, item);

4、將copyList賦值給list,并在結(jié)尾處獲得新的拷貝的copyList

this.list=this.copyList
this.copyList = this.list.slice(0);

全部代碼

import draggable from "@/vuedraggable";
let id = 1;
export default {
? name: "simple",
? display: "Simple",
? order: 0,
? components: {
? ? draggable,
? },
? data() {
? ? return {
? ? ? enabled: true,
? ? ? list: [{ name: "a" }, { name: "b" }, { name: "c" }],
? ? ? dragging: false,
? ? ? index: 0,
? ? ? copyList: [],
? ? };
? },
? computed: {
? ? draggingInfo() {
? ? ? return this.dragging ? "under drag" : "";
? ? },
? },
? created() {
? ? this.copyList = this.list.slice(0);
? },
? methods: {
? ? add: function () {
? ? ? this.list.push({ name: "Juan " + id, id: id++ });
? ? },
? ? replace: function () {
? ? ? this.list = [{ name: "Edgard", id: id++ }];
? ? },
? ? end({ oldIndex, newIndex }) {
? ? ? const item = this.copyList[oldIndex];
? ? ? this.copyList.splice(oldIndex, 1, this.copyList[newIndex]);
? ? ? this.copyList.splice(newIndex, 1, item);
? ? ? this.list = this.copyList;
? ? ? this.copyList = this.list.slice(0);
? ? },
? }
};

<draggable
? ? ? ? :list="list"
? ? ? ? :disabled="!enabled"
? ? ? ? class="list-group"
? ? ? ? ghost-class="ghost"
? ? ? ? :move="checkMove"
? ? ? ? @end="end"
? ? ? ? @sort="sort"
? ? ? ? @update="update"
? ? ? ? @start="start"
? ? ? >
? <div class="list-group-item" v-for="element in list" :key="element.name">{{ element.name }}</div>
</draggable>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: