<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	拖動時，鼠標(biāo)必須與空的可排序?qū)ο笾g的距離	Number	5
clone	返回值為true時克隆，可以理解為正常的拖拽變成了復(fù)制。當(dāng)pull:'clone時的拖拽的回調(diào)函數(shù)’	Function	無處理
move	如果不為空，這個函數(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)選中列表單元可以開始拖動的延遲時間	Number
disabled	定義是否此sortable對象是否可用	Boolean
animation	動畫時間單位:ms	Number
handle	使列表單元中符合選擇器的元素成為拖動的手柄，只有按住拖動手柄才能使列表單元進(jìn)行拖動	Selector
filter	定義哪些列表單元不能進(jìn)行拖放，可設(shè)置為多個選擇器，中間用“，”分隔	Selector
preventOnFilter	當(dāng)拖動filter時是否觸發(fā)event.preventDefault() 默認(rèn)觸發(fā)	Boolean
draggable	定義哪些列表單元可以進(jìn)行拖放	Selector
ghostClass	當(dāng)拖動列表單元時會生成一個副本作為影子單元來模擬被拖動單元排序的情況，此配置項(xiàng)就是來給這個影子單元添加一個class	Selector
chosenClass	目標(biāo)被選中時添加	Selector
dragClass	目標(biāo)拖動過程中添加	Selector
forceFallback	如果設(shè)置為true時，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等	Boolean
fallbackClass：	當(dāng)forceFallback設(shè)置為true時，拖放過程中鼠標(biāo)附著單元的樣式	String
dataIdAttr	data-id	Selector
scroll	當(dāng)排序的容器是個可滾動的區(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	開始拖動時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
add	添加單元時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
remove	單元被移動到另一個列表時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
update	排序發(fā)生變化時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
end	拖動結(jié)束時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
choose	選擇單元時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
sort	排序發(fā)生變化時的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
filter	嘗試選擇一個被filter過濾的單元的回調(diào)函數(shù)	function（{to,from,item,clone,oldIndex,newIndex})
clone	clone時的回調(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>