欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年04月06日 11:16:19   作者:雙手依舞  
這篇文章主要為大家詳細(xì)介紹了Vue draggable實(shí)現(xiàn)從左到右拖拽功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

1、安裝插件

npm install vuedraggable

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

import draggable from ‘vuedraggable'

3、注冊(cè)組件

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è)上下移動(dòng)時(shí),使用這個(gè)類;移動(dòng)到右側(cè)時(shí),使用ghostR類
? ? ? };
? ? },
? ? dragOptionsR() {
? ? ? return {
? ? ? ? animation: 500,
? ? ? ? disabled: false,
? ? ? ? ghostClass: "ghostR", //注意:在右側(cè)上下移動(dòng)時(shí),使用這個(gè)類
? ? ? };
? ? },
? },
? 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)容時(shí)不可以拖動(dòng)*/
}
.item {
? width: 100%;
? height: 60px;
? line-height: 60px;
? background: #f2f2f2;
? margin-bottom: 12px;
}

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

注意事項(xiàng):

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

2.options中的sort: false表示禁止上下拖動(dòng)

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

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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論