vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
更新時間：2024年09月16日 09:59:18 作者：?團子?
在Vue3中使用拖拽功能時應選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關說明,需要的朋友可以參考下
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','哦靠平淡是福','點擊分手快樂吧'])
</script>3.效果
4.說明
在vue3中拖拽插件需要用vue-draggable-next，一般不能使用draggable，draggable會報錯（會出現(xiàn)TypeError: Cannot read properties of undefined (reading header )）
總結
到此這篇關于vue3中實現(xiàn)拖拽排序的文章就介紹到這了,更多相關vue3拖拽排序vue-draggable-next內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js中的插槽（slot）是一種機制，允許你在組件的模板中預留一些位置，以便父組件可以將任意內容插入到這些位置，這使得組件更加靈活和可復用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了Vue學習筆記之表單輸入綁定，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
工作中遇到一個需求是根據(jù)日歷查看某一天/某一周/某一月的睡眠報告，但是找了好多日歷組件都不是很符合需求，只好自己手寫一個日歷組件，順便記錄一下，希望對大家有所幫助2023-04-04
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項目上有一個需求,頁面上有50、60個數(shù)據(jù)變量,是依次排序遞增的變量,中間有個別變量用不到,不想把這些變量直接定義在data() { }內,這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項目中遇到的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了vue中引入第三方字體文件的方法示例，文中講述了實現(xiàn)方法及其錯誤的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
這篇文章詳細介紹了Vue的生命周期，文中通過代碼示例介紹的非常詳細。對大家的學習有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue實現(xiàn)彈出框內嵌頁面展示并添加tab切換展示實時加載
彈窗效果是在Web開發(fā)中經常用到的一種交互效果,這篇文章主要給大家介紹了關于vue實現(xiàn)彈出框內嵌頁面展示并添加tab切換展示實時加載的相關資料,需要的朋友可以參考下2024-01-01