Vue.Draggable使用文檔總結

Draggable爲基於Sortable.js的vue組件，用以實現拖拽功能。
關於Vue.Draggable詳細信息能夠查看github地址

特性

• 支持觸摸設備
• 支持拖拽和選擇文本
• 支持智能滾動
• 支持不一樣列表之間的拖拽
• 不以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

options配置項

參數	說明	類型
group	用於分組，同一組的不一樣list能夠相互拖動	String/Array
sort	定義是否能夠拖拽	Array
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>
複製代碼