vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過(guò)程解析
更新時(shí)間：2023年06月26日 09:06:45 作者：他的貓MM
這篇文章主要為大家介紹了vuedraggable拖拽到目標(biāo)區(qū)域?qū)崿F(xiàn)過(guò)程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
目標(biāo)
我要把item1從A區(qū)域拖拽到B區(qū)域，我想在B區(qū)域設(shè)置監(jiān)聽(tīng)回調(diào)事件
A區(qū)域代碼
// html部分
<div v-for="item in list" :key="item" class="item" >
<p
@dragstart="dragstart($event,item)" //這是拖拽開(kāi)始
@dragend="dragend($event)" //這是拖拽結(jié)束
@drag="drag($event)" //這是拖拽中
draggable="true" //這是給div注冊(cè)拖拽
>{{item}}</p>
</div>
//js部分
dragstart(e,item){ //拖拽開(kāi)始時(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)拖拽離開(kāi)這個(gè)div時(shí)
@dragover="dragover($event)" //拖拽在這個(gè)div里面拖拽時(shí)
@drop='drop($event)'//在div里拖拽停止時(shí)
></div>
</div>
//js部分
dragleave(e){ //當(dāng)拖拽離開(kāi)這個(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)過(guò)程解析的詳細(xì)內(nèi)容，更多關(guān)于vuedraggable目標(biāo)區(qū)域拖拽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
docxtemplater?是一種郵件合并工具,以編程方式使用并處理?xiàng)l件、循環(huán),并且可以擴(kuò)展以插入任何內(nèi)容,下面我們來(lái)看看如何使用docxtemplater導(dǎo)出word吧2025-04-04
這篇文章主要介紹了vue中使用騰訊云Im的示例，幫助大家調(diào)用對(duì)應(yīng)的api，完成自己的項(xiàng)目，感興趣的朋友可以了解下2020-10-10
詳解如何將 Vue-cli 改造成支持多頁(yè)面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁(yè)面的 history 模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
使用Vue3實(shí)現(xiàn)在瀏覽器端進(jìn)行zip文件壓縮
在前端開(kāi)發(fā)中,我們時(shí)常需要處理文件上傳和下載的功能,本文主要和大家分享一下如何使用Vue3和JSZip庫(kù)在瀏覽器端實(shí)現(xiàn)zip文件壓縮,需要的可以參考下2024-05-05
如何通過(guò)點(diǎn)擊按鈕切換顯示不同echarts圖表
這篇文章主要介紹了如何通過(guò)點(diǎn)擊按鈕切換顯示不同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中的this.$options.data()和this.$data用法說(shuō)明
這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue-router4版本第一次打開(kāi)界面不匹配路由問(wèn)題解決
本文主要介紹了vue-router4版本第一次打開(kāi)界面不匹配路由問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在實(shí)際開(kāi)發(fā)中每個(gè)開(kāi)發(fā)者應(yīng)該都有經(jīng)歷過(guò)對(duì)組件進(jìn)行二次封裝,本文將從三個(gè)方面來(lái)基于 Element UI 的el-input組件簡(jiǎn)單實(shí)現(xiàn)一下組件的二次封裝,有需要的可以參考下2023-09-09
vue中用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
本篇文章主要介紹了vue中用動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
vue使用js-audio-recorder實(shí)現(xiàn)錄音功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用js-audio-recorder實(shí)現(xiàn)錄音功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12