Vue draggable實(shí)現(xiàn)從左到右拖拽功能
本文實(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)文章
Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時(shí)結(jié)果為undefined問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問題
這篇文章主要介紹了詳解解決Vue相同路由參數(shù)不同不會(huì)刷新的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置指南
最近在使用vite生成項(xiàng)目,這篇文章主要給大家介紹了關(guān)于vue3+vite中開發(fā)環(huán)境與生產(chǎn)環(huán)境全局變量配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vue3數(shù)據(jù)監(jiān)聽watch/watchEffect的示例代碼
我們都知道監(jiān)聽器的作用是在每次響應(yīng)式狀態(tài)發(fā)生變化時(shí)觸發(fā),在組合式?API?中,我們可以使用?watch()函數(shù)和watchEffect()函數(shù),下面我們來(lái)看下vue3如何進(jìn)行數(shù)據(jù)監(jiān)聽watch/watchEffect,感興趣的朋友一起看看吧2023-02-02vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解
這篇文章主要為大家介紹了vue vite之LogicFlow安裝核心依賴及項(xiàng)目初始化詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問題
這篇文章主要介紹了Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法詳解
在開發(fā)工作過程中,我們會(huì)遇到各種各樣的表格數(shù)據(jù)導(dǎo)入,動(dòng)態(tài)數(shù)據(jù)導(dǎo)入可以減少人為操作,減少出錯(cuò)。本文為大家介紹了Vue3實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入Excel表格數(shù)據(jù)的方法,需要的可以參考一下2022-11-11vite項(xiàng)目添加eslint?prettier及husky方法實(shí)例
這篇文章主要為大家介紹了vite項(xiàng)目添加eslint?prettier及實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07