vue3中實(shí)現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
更新時(shí)間：2024年09月16日 09:59:18 作者：?團(tuán)子?
在Vue3中使用拖拽功能時(shí)應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯(cuò)誤,安裝后,需在項(xiàng)目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說(shuō)明,需要的朋友可以參考下
1.安裝插件
npm i vue-draggable-next
2.引入使用
<template>
<vue-draggable-next v-model="list" tag="div" handle=".warn-card" group="warngroup" ghost-class="ghost"
class="mb10 warn-card-box" animation="300">
<transition-group>
<div class="warn-card mb8" style="cursor: grab;" v-for="(item,index) in list" :key="index">
<div>{{ item }}</div>
</div>
</transition-group>
</vue-draggable-next>
</template>
<script setup>
import { VueDraggableNext } from 'vue-draggable-next'
import {ref} from "vue"
const list = ref(['灑了幾滴','lksdf','哦靠平淡是福','點(diǎn)擊分手快樂(lè)吧'])
</script>3.效果
4.說(shuō)明
在vue3中拖拽插件需要用vue-draggable-next，一般不能使用draggable，draggable會(huì)報(bào)錯(cuò)（會(huì)出現(xiàn)TypeError: Cannot read properties of undefined (reading header )）
總結(jié)
到此這篇關(guān)于vue3中實(shí)現(xiàn)拖拽排序的文章就介紹到這了,更多相關(guān)vue3拖拽排序vue-draggable-next內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue二次封裝axios為插件使用詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
詳解Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器
這篇文章主要為大家介紹了Vue的數(shù)據(jù)及事件綁定和filter過(guò)濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫(xiě)return
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語(yǔ)法糖拒絕寫(xiě)return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了Vue項(xiàng)目中使用自定義字體樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解在vue-test-utils中mock全局對(duì)象
這篇文章主要介紹了詳解在vue-test-utils中mock全局對(duì)象，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制功能，文中給大家介紹了兩種方式進(jìn)行權(quán)限限制，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-07-07
elementUI表格多選框this.$refs.xxx.toggleRowSelection無(wú)效問(wèn)題
這篇文章主要介紹了elementUI表格多選框this.$refs.xxx.toggleRowSelection無(wú)效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問(wèn)題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
解決vue打包項(xiàng)目后刷新404的問(wèn)題
下面小編就為大家整理了一篇解決vue打包項(xiàng)目后刷新404的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03