vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析
更新時(shí)間：2023年06月26日 09:06:45 作者：他的貓MM
這篇文章主要為大家介紹了vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
目標(biāo)
我要把item1從A區(qū)域拖拽到B區(qū)域，我想在B區(qū)域設(shè)置監(jiān)聽回調(diào)事件
A區(qū)域代碼
// html部分
<div v-for="item in list" :key="item" class="item" >
<p
@dragstart="dragstart($event,item)" //這是拖拽開始
@dragend="dragend($event)" //這是拖拽結(jié)束
@drag="drag($event)" //這是拖拽中
draggable="true" //這是給div注冊(cè)拖拽
>{{item}}</p>
</div>
//js部分
dragstart(e,item){ //拖拽開始時(shí)將item存入vuex
this.vuex = item
console.log(e.target)
},
drag(e){ //拖拽中執(zhí)行的事件
// console.log('drag',e)s
},
dragend(e){ //拖拽結(jié)束執(zhí)行的事件
console.log('dragend',e)
}B區(qū)域代碼
//html部分
<div>
<div class="text"
@dragleave="dragleave($event)" //當(dāng)拖拽離開這個(gè)div時(shí)
@dragover="dragover($event)" //拖拽在這個(gè)div里面拖拽時(shí)
@drop='drop($event)'//在div里拖拽停止時(shí)
></div>
</div>
//js部分
dragleave(e){ //當(dāng)拖拽離開這個(gè)div時(shí)執(zhí)行的事件
console.log('dragleave',e)
},
dragover(e){ //拖拽在這個(gè)div里面拖拽時(shí)執(zhí)行的事件
//一定要執(zhí)行preventDefault(),否則drop事件不會(huì)被觸發(fā)
e.preventDefault()
},
drop(e){ //在div里拖拽停止時(shí)執(zhí)行的事件
alert('拿到Vuex的值')
}公共區(qū)域代碼
<div> <dragA></dragA> <dragB></dragB> </div> import dragA from '@/components/dragA.vue'; import dragB from '@/components/dragB.vue';
以上就是vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過程解析的詳細(xì)內(nèi)容，更多關(guān)于vuedraggable目標(biāo)區(qū)域拖拽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了使用v-memo緩存模板子樹提高應(yīng)用性能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件
本篇文章主要介紹了詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
通過npm或yarn自動(dòng)生成vue組件的方法示例
這篇文章主要介紹了通過npm或yarn自動(dòng)生成vue組件的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
VUE實(shí)現(xiàn)表單元素雙向綁定（總結(jié)）
本篇文章主要介紹了VUE實(shí)現(xiàn)表單元素雙向綁定（總結(jié)） ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Vue中對(duì)數(shù)組和對(duì)象進(jìn)行遍歷和修改方式
這篇文章主要介紹了Vue中對(duì)數(shù)組和對(duì)象進(jìn)行遍歷和修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
element中el-autocomplete的常見用法示例
這篇文章主要給大家介紹了關(guān)于element中el-autocomplete的常見用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用element具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
Form組件提供了表單驗(yàn)證的功能,只需要通過屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于Element中el-form表單的相關(guān)資料,需要的朋友可以參考下2023-01-01
在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12