vue3使用vuedraggable實現(xiàn)拖拽功能
更新時間：2022年04月06日 10:08:29 作者：smily_word
這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue3使用vuedraggable實現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下
1、npm i vuedraggable -S，使用這個命令，vue3會報錯，如下圖
2、使用npm uninstall vuedraggable -S 卸載，再使用npm i -S vuedraggable@next下載最新版
3、vue使用代碼如下：
<template>
? <div>
? ? <h1 class="title">拖拽</h1>
? ? <draggable
? ? ? class="wrapper"
? ? ? v-model="list"
? ? ? @start="drag = true"
? ? ? @end="drag = false"
? ? ? item-key="index"
? ? >
? ? ? <template #item="{ element }">
? ? ? ? <div class="item">
? ? ? ? ? <p>{{ element }}</p>
? ? ? ? </div>
? ? ? </template>
? ? </draggable>
? </div>
</template>
?
<script>
import { reactive, toRefs, onMounted } from 'vue'
import draggable from 'vuedraggable'
?
export default {
? name: 'dragAndDrop',
? components: { draggable },
? setup () {
? ? const state = reactive({
? ? ? drag: false,
? ? ? list: [1, 2, 3, 4, 5, 6]
? ? })
? ? onMounted(() => {})
? ? return {
? ? ? ...toRefs(state)
? ? }
? }
}
</script>
?
<style scoped>
.title {
? text-align: center;
? color: #42b983;
}
.wrapper {
? display: flex;
? justify-content: center;
? width: 100%;
}
.item {
? width: 100px;
? height: 100px;
? font-size: 50px;
? text-align: center;
? line-height: 100px;
? margin: 10px;
? background-color: #42b983;
? color: #ffffff;
}
</style>4、效果如下圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue監(jiān)聽Enter鍵的方法總結(jié)與區(qū)別
這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽Enter鍵的方法與區(qū)別的相關(guān)資料,在Vue中我們可以通過監(jiān)聽鍵盤事件來實現(xiàn)回車鍵切換焦點的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套）
這篇文章主要介紹了vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面
這篇文章主要介紹了vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue3之 頁面,菜單,路由的使用，文章圍繞Vue3頁面,菜單,路由相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了如何啟動一個Vue.js項目，對Vue.js感興趣的同學(xué)，可以參考下2021-04-04
這篇文章主要為大家詳細(xì)介紹了Vue.Draggable拖拽功能配置使用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式
這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標(biāo)注方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue項目添加動態(tài)瀏覽器頭部title的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07