vue3使用拖拽組件draggable.next的保姆級教程

更新時間：2023年06月06日 11:23:45 作者：糯米飯團(tuán)飯米糯

做項目的時候遇到了一個需求,拖拽按鈕到指定位置，添加一個輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級教程,需要的朋友可以參考下

（一）首先，明確需求：

做一個可重復(fù)拖拽生成的表格設(shè)計器，效果圖如下：

（二）搭一個基本的可互相拖拽的框架

（1）在終端使用npm命令下載插件

npm i -S vuedraggable@next
//導(dǎo)入
import draggable from 'vuedraggable'

（2）拖拽插件大致可分為兩種使用方式——分組拖拽與單組拖拽

單組拖拽為只有一組數(shù)據(jù)，而拖拽是交換此組數(shù)據(jù)內(nèi)部的位置，如下圖所示：

而互相拖拽是有兩組數(shù)據(jù)，兩組數(shù)據(jù)可以各自內(nèi)部換順序，可以相互拖拽到對方的數(shù)組中。

本文需求只用到了互相拖拽，互相拖拽的代碼形式如下：

    //需要克隆的數(shù)據(jù)，A組
    <draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }"
      :sort="false" itemKey="id">
      <template #item="{ element }">
        <div class="item move">
          <label class="move">{{ element.name }}</label>
        </div>
      </template>
    </draggable>
//拖拽的結(jié)果，B組
 <draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list" :fallback-class="true"
    :fallback-on-body="true">
    <template #item="{ element }">
      <div class="item move">
        <label class="move">{{ element.name }}</label>
      </div>
    </template>
  </draggable>
<script lang="ts" setup>
import draggable from 'vuedraggable'
interface type {
  name: string,
  id: number
}
const dragList: type[] = reactive<type[]>([
  { name: "單行文本", id: 1 },
  { name: "多行文本", id: 2 },
  { name: "計數(shù)器", id: 3 },
  { name: "單選框組", id: 4 },
])
const widgetList = reactive<type[]>([
  { name: "多行文本", id: 2 },
])

draggable的一些常用的屬性我作了整理，方便根據(jù)不同的需求取用，可核對表格填寫：

屬性	說明	類型	是否必填
group	如果是分組拖拽，可通過設(shè)置group的name來實(shí)現(xiàn)分類。 pull屬性代表拖出，put為拖入， :group="{ name :'list',pull : true, put: false }" 代表這個分組與其他name為list的分組可實(shí)現(xiàn)分組拖拽，此分組允許拖出，不允許拖入，pull為‘clone’則代表clone模式，pull與put可寫可不寫，默認(rèn)值都為true	Object / string	否（分組拖拽時必填）
list	綁定的數(shù)據(jù)	Array	是
sort	是否開啟排序功能，默認(rèn)為true,如果設(shè)置為false,它所在組無法排序	Boolean	否
force-fallback	默認(rèn)false，忽略HTML5的拖拽行為，因為h5里有個屬性也是可以拖動，你要自定義ghostClass chosenClass dragClass樣式時，建議forceFallback設(shè)置為true	Boolean	否（設(shè)置ghost-class或drag-class時為必填）
ghost-class	:ghostClass=“ghostClass” 設(shè)置拖動元素的占位符類名,可以將拖動時的元素設(shè)置為不同的樣式。自定義樣式可能需要加!important才能生效，并把forceFallback屬性設(shè)置成true。	String	否
disabled	是否禁用，默認(rèn)false	Boolean	否
drag-class	:drag-class="dragClass"拖動元素的樣式，你的自定義樣式可能需要加!important才能生效，并把forceFallback屬性設(shè)置成true	Boolean	否
item-key	每個元素唯一的標(biāo)識，建議使用id itemKey='id'，注意，此處無需寫成變量形式	String	是（不填也能運(yùn)行，但控制臺會報警告）

到現(xiàn)在為止，這已經(jīng)是個互相拖拽的組件了。

（3）如果發(fā)現(xiàn)自己寫的組件不能進(jìn)行拖拽，或者網(wǎng)頁上不顯示組件，或者出現(xiàn)紅色報錯信息，則檢查以下注意點(diǎn) ：

group中name是否一致，group為變量，需要 :group =‘{name:'' }’的形式
AB組的元素要實(shí)現(xiàn)互相拖拽，元素的數(shù)據(jù)結(jié)構(gòu)必須完全一致，如果不放心，可以使用interface來定義一個類型諸如 interface itemType { name : string , id:number }
AB組綁定的數(shù)組是否為響應(yīng)式，如非響應(yīng)式，會發(fā)生拖拽成功，但不能及時響應(yīng)的情況，可以用這個方法自檢-->先進(jìn)行拖拽，然后在代碼的html部分隨便加個東西，然后保存，觀察網(wǎng)頁上是否顯示剛才拖拽的內(nèi)容，如果出現(xiàn)，那就是數(shù)組非響應(yīng)式的問題。
改正：const arr = reactive<itemType[]>([ { name : 'name ' , id : 1 } ])
在新版vue3中，item插槽是必寫的部分，不能使用v-for循環(huán)替代。

<draggable>
    <template #item="{ element }">
        <div class="item move">
          <label class="move">{{ element.name }}</label>
        </div>
      </template>
</draggable>

5.item插槽中只允許有一個子元素，此處有個坑，就是如果有兩個子元素，但注釋掉了一個，也會報錯。哪怕實(shí)際上這只有一個子元素。

//正確的  
<template #item="{ element }">
      <div class="item move">
        <label class="move">{{ element.name }}</label>
      </div>
 </template>
//會報錯的情況！
<template #item="{ element }">
      <!-- <div class="class"></div> -->
      <div class="item move">
        <label class="move">{{ element.name }}</label>
      </div>
 </template>

到此為止，已經(jīng)實(shí)現(xiàn)拖拽成功。有些人可能會碰到這個問題————如果B組為空，向B組內(nèi)拖第一個組件的時候，會出現(xiàn)拖拽困難，只能往拖拽區(qū)的最頂部拖才能成功 / 根本無法拖拽成功。

原因：因為B組的draggable渲染時為一個高度為auto的div，當(dāng)前組如果為空，高度也為0，可拖拽區(qū)就會變得很小或不存在。

解決方法：為B組的draggable設(shè)計高度，具體代碼為添加類名，在css中設(shè)置

<draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list" :fallback-class="true"
    :fallback-on-body="true" class="drag-content">
    <template #item="{ element }">
      <div class="item move">
        <label class="move">{{ element.name }}</label>
      </div>
    </template>
  </draggable>
<style lang="less" scoped>
    .drag-content {
        height:500px; //建議是外層嵌套一層div，div固定高，此處再設(shè)為100%
    }
</style>

（三）將拖拽后的內(nèi)容替換為element組件/其它指定內(nèi)容

我們發(fā)現(xiàn)，拖拽后顯示的內(nèi)容可自由定義，在B組的draggable中設(shè)置

此時，我們需要完善dragList的數(shù)組結(jié)構(gòu),來映射拖拽后所形成的不同組件

（在組件少的情況下可以這么做）

interface itemType {
  name: string,
  id: number,
  element:string
}
 
const dragList: type[] = reactive<type[]>([
  { name: "單行文本", id: 1, element: 'Input' },
  { name: "多行文本", id: 2, element: 'Textarea' },
  { name: "計數(shù)器", id: 3, element: 'InputNumber' },
  { name: "單選框組", id: 4, element: 'Radio' },
])
 
const widgetList = reactive<type[]>([
 
])

//  A組
<draggable :list="dragList" ghost-class="ghost" :force-fallback="true" :group="{ name: 'list', pull: 'clone' }"
      :sort="false" itemKey="id">
      <template #item="{ element }">
        <div class="item move">
          <label class="move">{{ element.name }}</label>
        </div>
      </template>
    </draggable>
// B組
    <draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list"
      :fallback-class="true" :fallback-on-body="true" class="drag-content">
      <template #item="{ element }">
        <div class="item move">
          <label class="move title">{{ element.name }}</label>
          <div> <el-input v-model="input" placeholder="Please input" v-if="element.element === 'input'" /></div>
          <div><el-input v-model="textarea" :rows="2" type="textarea" placeholder="Please input"
              v-if="element.element === 'textarea'" /> </div>
        </div>
      </template>
    </draggable>

點(diǎn)擊控件拖過去，就可以實(shí)現(xiàn)如下的效果，如果不想要標(biāo)題，可以把label部分去掉，其他控件如法炮制即可：

在組件數(shù)量少的時候，可以這么做，但數(shù)量多時，建議使用component標(biāo)簽來映射

（1）先更改一下文件的結(jié)構(gòu)

（2）寫一個公共的函數(shù)去返回當(dāng)前widgets文件夾下的所有文件

// getWidget.ts
 
const gets = {} as any 
const modules = import.meta.glob('./*.vue', {eager:true})
for (let each in modules) {
  const name = (modules[each] as any).default.__name
  gets[name] = (modules[each] as any).default
}
 
console.log(gets);
 
export default gets

也可使用globEager方法，編譯器會報錯：函數(shù)已經(jīng)棄用，不過不影響使用。

（3）分別把每個組件的部分寫好

// Input.vue
<template>
  <div>
    <el-input v-model="input" placeholder="Please input"  />
  </div>
</template>
  
<script lang="ts" setup>
 
 const input=ref('')
</script>
 
<style lang="less" scoped>
 
</style>

（四）使用component標(biāo)簽映射

 
    <draggable :list="widgetList" ghost-class="ghost" itemKey="id" :force-fallback="true" group="list"
      :fallback-class="true" :fallback-on-body="true" class="drag-content">
      <template #item="{ element }">
 
        <div class="item move">
          <label class="move title">{{ element.name }}</label>
          <div>
            <component :is="getWidget(element.element)"></component>
          </div>
        </div>
      </template>
    </draggable>
  
 
// 使用函數(shù)映射
 
<script lang="ts" setup>
import draggable from 'vuedraggable'
//要注意導(dǎo)入
import getName from './widgets/getWidget'
 
const getWidget = (name: string) => {
//寫的時候，組件的起名一定要與dragList中的element名字一模一樣，不然會映射不上
  return getName[name]
}