vue3使用vuedraggable實(shí)現(xiàn)拖拽功能

更新時(shí)間：2022年04月06日 10:08:29 作者：smily_word

這篇文章主要為大家詳細(xì)介紹了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue3使用vuedraggable實(shí)現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

1、npm i vuedraggable -S，使用這個(gè)命令，vue3會(huì)報(bào)錯(cuò)，如下圖

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、效果如下圖

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

您可能感興趣的文章:

相關(guān)文章

Vue的全局過(guò)濾器和私有過(guò)濾器的實(shí)現(xiàn)
這篇文章主要介紹了Vue的全局過(guò)濾器和私有過(guò)濾器的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR）
直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用，頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html，這并不利于網(wǎng)站的 SEO，這時(shí)候就需要服務(wù)端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
vuejs事件中心管理組件間的通信詳解
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
在Vue3項(xiàng)目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學(xué)習(xí)如何在 Vue 3 項(xiàng)目中集成 CodeMirror,以創(chuàng)建一個(gè)支持 SQL 語(yǔ)法高亮和自動(dòng)補(bǔ)全的代碼編輯器,需要的朋友可以參考下
2025-04-04
解決vite打包后白屏之router-view不生效問(wèn)題
這篇文章主要介紹了解決vite打包后白屏之router-view不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成
在本篇文章中小編給大家分享了關(guān)于如何使用Vue.js方法創(chuàng)建模板并使用多個(gè)模板合成的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們學(xué)習(xí)下。
2019-06-06
Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式超詳細(xì)分解
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的3種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
詳解Vue的Pinia如何做到刷新不丟數(shù)據(jù)
Pinia 是 Vue 3 的官方推薦狀態(tài)管理庫(kù),旨在替代 Vuex,提供更簡(jiǎn)單、直觀的狀態(tài)管理解決方案,Pinia 的設(shè)計(jì)理念是簡(jiǎn)單、易于學(xué)習(xí)和使用,本文給大家詳細(xì)介紹了Vue的Pinia如何做到刷新不丟數(shù)據(jù),需要的朋友可以參考下
2025-01-01
vxe-table?使用?vxe-upload?在表格中實(shí)現(xiàn)非常強(qiáng)大的粘貼上傳圖片和附件功能
本文通過(guò)實(shí)例代碼介紹了vxe-table渲染器的強(qiáng)大功能,配合 vxe-upload 上傳,比如復(fù)制或者截圖一張圖片,通過(guò)粘貼方式快速粘貼到單元格中,能支持單張、多張、查看、預(yù)覽功能,感興趣的朋友跟隨小編一起看看吧
2024-12-12