Vue.Draggable使用總結

Draggable為基於Sortable.js的vue組件，用以實現拖拽功能。

特性

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

安裝

npm install vuedraggable

引入

import draggable from 'vuedraggable'

基礎用法

定義一個json串 list，實現它的拖拽排序。

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

屬性列表

參數	說明	類型	默認值
value	用於實現拖拽的list，通常和內部v-for循環的數組為同一數組	Array	null
list	效果同value的。和v-model不能共用	Array	null
tag	draggable 標簽在渲染后展現出來的標簽類型	String	div
options	draggable 列表配置項	Object	null
emptyInsertThreshold	拖動時，鼠標必須與空的可排序對象之間的距離	Number	5
clone	返回值為true時克隆，可以理解為正常的拖拽變成了復制。當pull:'clone時的拖拽的回調函數’	Function	無處理
move	如果不為空，這個函數將以類似於Sortable onMove回調的方式調用。返回false將取消拖動操作。	Function	null
componentData	用來結合UI組件的，可以理解為代理了UI組件的定制信息	Object	null

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

options配置項

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

事件

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

 插槽

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

 

　　Header

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

<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組件中添加不可拖動的元素。它應該與draggable選項一起使用，以標記draggable元素。請注意，無論頁腳槽在模板中的位置如何，它都將始終添加到默認槽之后。

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