欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)

 更新時間：2024年09月16日 09:59:18   作者：?團子?  
在Vue3中使用拖拽功能時應(yīng)選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導(dǎo)致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關(guān)說明,需要的朋友可以參考下

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 )）

總結(jié)

到此這篇關(guān)于vue3中實現(xiàn)拖拽排序的文章就介紹到這了,更多相關(guān)vue3拖拽排序vue-draggable-next內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論