Vue draggable實現(xiàn)從左到右拖拽功能

更新時間：2022年04月06日 11:16:19 作者：雙手依舞

這篇文章主要為大家詳細介紹了Vue draggable實現(xiàn)從左到右拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue draggable實現(xiàn)從左到右拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

1、安裝插件

npm install vuedraggable

2、在需要使用的組件中引入

import draggable from ‘vuedraggable'

3、注冊組件

components:{undefined
draggable
}

示例：

<div style="height: 1000px;">
? ? <div class="test-left">
? ? ? <!-- 左側(cè)按鈕 -->
? ? ? <draggable
? ? ? ? v-model="list1"
? ? ? ? draggable=".c-item"
? ? ? ? v-bind="dragOptionsL"
? ? ? ? :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}"
? ? ? >
? ? ? ? <div v-for="(d,index) in list1" :key="index" class="item c-item">{{d.name}}</div>
? ? ? </draggable>
? ? </div>
? ? <div class="test-right">
? ? ? <!-- 右側(cè)按鈕 -->
? ? ? <draggable group="field" :list="list2" v-bind="dragOptionsR" @change="toChange">
? ? ? ? <div v-for="(d,k) in list2" :key="k" class="item">{{d.name}}</div>
? ? ? </draggable>
? ? </div>
</div>

<script>
import draggable from "vuedraggable";
export default {
? data() {
? ? return {
? ? ? list1: [
? ? ? ? { name: "11", id: 1 },
? ? ? ? { name: "22", id: 2 },
? ? ? ? { name: "33", id: 3 },
? ? ? ? { name: "44", id: 4 },
? ? ? ],
? ? ? list2: [
? ? ? ? { name: "5", id: 5 },
? ? ? ? { name: "6", id: 6 },
? ? ? ? { name: "7", id: 7 },
? ? ? ],
? ? };
? },
? components: {
? ? draggable,
? },
? computed: {
? ? dragOptionsL() {
? ? ? return {
? ? ? ? disabled: false,
? ? ? ? ghostClass: "ghostL", //注意：在左側(cè)上下移動時，使用這個類；移動到右側(cè)時，使用ghostR類
? ? ? };
? ? },
? ? dragOptionsR() {
? ? ? return {
? ? ? ? animation: 500,
? ? ? ? disabled: false,
? ? ? ? ghostClass: "ghostR", //注意：在右側(cè)上下移動時，使用這個類
? ? ? };
? ? },
? },
? methods: {
? ? toChange(e) {
? ? ? console.log(e);
? ? ? if (e.added) {
? ? ? ? console.log(this.list2);
? ? ? }
? ? }
? }
};
</script>

<style>
.test-left {
? float: left;
? width: 300px;
}
.test-right {
? float: left;
? margin-left: 20px;
? width: 300px;
}
.test-right > div {
? min-height: 80px; /*為了防止右側(cè)開始沒有內(nèi)容時不可以拖動*/
}
.item {
? width: 100%;
? height: 60px;
? line-height: 60px;
? background: #f2f2f2;
? margin-bottom: 12px;
}

.ghostL {
? opacity: 0.5;
? width: 230px;
}
.ghostR {
? opacity: 0;
? width: 230px;
}

注意事項：

1.左邊draggle插件，:group="{ name: ‘dragobj’, pull: ‘clone’, put: false}"
{ name: 'dragobj’取相同名字的可以來回拖拽；pull: 'clone’從左向右克隆，后面用右邊draggle插件的dragChangeR()方法讓左側(cè)數(shù)據(jù)隱藏了，left并不是真正的刪除這條數(shù)據(jù)；put: false 禁止從右向左拖放數(shù)據(jù) }

2.options中的sort: false表示禁止上下拖動

3.問題：從左往右移動時，右側(cè)一直會出現(xiàn)items的name值，拖拽結(jié)束后，name值消失
解決方法：左右分別綁定一個v-bind=“dragOptionsL”，v-bind=“dragOptionsR”

4.問題：當右側(cè)沒有任何的items時，需要給右側(cè)v-for循環(huán)的父元素指定一個min-height，否則從左側(cè)拖到右側(cè)時，沒有接收的地方，則拖放失效

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

您可能感興趣的文章: