<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	拖動(dòng)時(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將取消拖動(dòng)操作。	Function	null
componentData	用來結(jié)合UI組件的，可以理解為代理了UI組件的定制信息	Object	null

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

options配置項(xiàng)

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

事件

參數(shù)	說明	回調(diào)參數(shù)
start	開始拖動(dòng)時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
add	添加單元時(shí)的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
remove	單元被移動(dòng)到另一個(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	拖動(dòng)結(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組件中添加不可拖動(dòng)的元素。它應(yīng)該與draggable選項(xiàng)一起使用來標(biāo)記draggable元素。請(qǐng)注意，無論標(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組件中添加不可拖動(dòng)的元素。它應(yīng)該與draggable選項(xiàng)一起使用，以標(biāo)記draggable元素。請(qǐng)注意，無論頁腳槽在模板中的位置如何，它都將始終添加到默認(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>