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.js中的插槽（slot）是一種機(jī)制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了Vue學(xué)習(xí)筆記之表單輸入綁定，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
Vue實(shí)現(xiàn)移動(dòng)端日歷的示例代碼
工作中遇到一個(gè)需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報(bào)告，但是找了好多日歷組件都不是很符合需求，只好自己手寫(xiě)一個(gè)日歷組件，順便記錄一下，希望對(duì)大家有所幫助2023-04-04
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項(xiàng)目上有一個(gè)需求,頁(yè)面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實(shí)現(xiàn)方法及其錯(cuò)誤的解決，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
這篇文章詳細(xì)介紹了Vue的生命周期，文中通過(guò)代碼示例介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue實(shí)現(xiàn)彈出框內(nèi)嵌頁(yè)面展示并添加tab切換展示實(shí)時(shí)加載
彈窗效果是在Web開(kāi)發(fā)中經(jīng)常用到的一種交互效果,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)彈出框內(nèi)嵌頁(yè)面展示并添加tab切換展示實(shí)時(shí)加載的相關(guān)資料,需要的朋友可以參考下2024-01-01