快捷導(dǎo)航

Vue.Draggable使用文檔超詳細(xì)總結(jié)

更新時(shí)間：2022年08月26日 09:54:32 作者：taoyouyou

Vue拖拽組件(Draggable)是一個(gè)允許與View-Model同步進(jìn)行拖放排序的Vue組件,下面這篇文章主要給大家介紹了關(guān)于Vue.Draggable使用文檔的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

Draggable為基于Sortable.js的vue組件，用以實(shí)現(xiàn)拖拽功能。

關(guān)于Vue.Draggable詳細(xì)信息可以查看github地址

特性

支持觸摸設(shè)備
支持拖拽和選擇文本
支持智能滾動
支持不同列表之間的拖拽
不以jQuery為基礎(chǔ)
和視圖模型同步刷新
和vue2的國度動畫兼容
支持撤銷操作
當(dāng)需要完全控制時(shí)，可以拋出所有變化
可以和現(xiàn)有的UI組件兼容

安裝

npm install vuedraggable

引入

import draggable from 'vuedraggable'

基礎(chǔ)用法

定義一個(gè)json串 list，實(shí)現(xiàn)它的拖拽排序。

<draggable v-model="list">
    <transition-group>
        <div v-for="element in list" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

屬性

參數(shù)	說明	類型	默認(rèn)值
value	用于實(shí)現(xiàn)拖拽的list，通常和內(nèi)部v-for循環(huán)的數(shù)組為同一數(shù)組	Array	null
list	效果同value的。和v-model不能共用	Array	null
tag	draggable 標(biāo)簽在渲染后展現(xiàn)出來的標(biāo)簽類型	String	div
options	draggable 列表配置項(xiàng)	Object	null
emptyInsertThreshold	拖動時(shí)，鼠標(biāo)必須與空的可排序?qū)ο笾g的距離	Number	5
clone	返回值為true時(shí)克隆，可以理解為正常的拖拽變成了復(fù)制。當(dāng)pull:'clone時(shí)的拖拽的回調(diào)函數(shù)’	Function	無處理
move	如果不為空，這個(gè)函數(shù)將以類似于Sortable onMove回調(diào)的方式調(diào)用。返回false將取消拖動操作。	Function	null
componentData	用來結(jié)合UI組件的，可以理解為代理了UI組件的定制信息	Object	null

注意：vuedraggable新版本廢棄了options屬性，建議使用v-bind屬性作為配置項(xiàng)

options配置項(xiàng)

參數(shù)	說明	類型
group	用于分組，同一組的不同list可以相互拖動	String/Array
sort	定義是否可以拖拽	Boolean
delay	定義鼠標(biāo)選中列表單元可以開始拖動的延遲時(shí)間	Number
disabled	定義是否此sortable對象是否可用	Boolean
animation	動畫時(shí)間單位:ms	Number
handle	使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進(jìn)行拖動	Selector
filter	定義哪些列表單元不能進(jìn)行拖放，可設(shè)置為多個(gè)選擇器，中間用“，”分隔	Selector
preventOnFilter	當(dāng)拖動filter時(shí)是否觸發(fā)event.preventDefault() 默認(rèn)觸發(fā)	Boolean
draggable	定義哪些列表單元可以進(jìn)行拖放	Selector
ghostClass	當(dāng)拖動列表單元時(shí)會生成一個(gè)副本作為影子單元來模擬被拖動單元排序的情況，此配置項(xiàng)就是來給這個(gè)影子單元添加一個(gè)class	Selector
chosenClass	目標(biāo)被選中時(shí)添加	Selector
dragClass	目標(biāo)拖動過程中添加	Selector
forceFallback	如果設(shè)置為true時(shí)，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等	Boolean
fallbackClass：	當(dāng)forceFallback設(shè)置為true時(shí)，拖放過程中鼠標(biāo)附著單元的樣式	String
dataIdAttr	data-id	Selector
scroll	當(dāng)排序的容器是個(gè)可滾動的區(qū)域，拖放可以引起區(qū)域滾動	Boolean
scrollFn	用于自定義滾動條的適配	Function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl)
ScrollSensitivity	就是鼠標(biāo)靠近邊緣多遠(yuǎn)開始滾動默認(rèn)30	Number
scrollSpeed	滾動速度	Number

事件

參數(shù)	說明	回調(diào)參數(shù)
start	開始拖動時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
add	添加單元時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
remove	單元被移動到另一個(gè)列表時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
update	排序發(fā)生變化時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
end	拖動結(jié)束時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
choose	選擇單元時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
sort	排序發(fā)生變化時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
filter	嘗試選擇一個(gè)被filter過濾的單元的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
clone	clone時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})

插槽

頁眉或頁腳插槽都不能與 tarnstion-group 一起使用。

Header

使用標(biāo)題插槽在vuedraggable組件中添加不可拖動的元素。它應(yīng)該與draggable選項(xiàng)一起使用來標(biāo)記draggable元素。請注意，無論標(biāo)題槽在模板中的位置如何，它總是被添加到默認(rèn)槽之前。

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="header" @click="addPeople">Add</button>
</draggable>

Footer

使用頁腳槽在vuedraggable組件中添加不可拖動的元素。它應(yīng)該與draggable選項(xiàng)一起使用，以標(biāo)記draggable元素。請注意，無論頁腳槽在模板中的位置如何，它都將始終添加到默認(rèn)槽之后。

<draggable v-model="myArray" draggable=".item">
    <div v-for="element in myArray" :key="element.id" class="item">
        {{element.name}}
    </div>
    <button slot="footer" @click="addPeople">Add</button>
</draggable>