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