Vuedraggable 拖拽組件插件
Vue.Draggable是一款基于Sortable.js實現(xiàn)的vue拖拽插件浮驳。支持移動設(shè)備普气、拖拽和選擇文本、智能滾動选脊,可以在不同列表間拖拽、不依賴jQuery為基礎(chǔ)脸甘、vue 2過渡動畫兼容恳啥、支持撤銷操作,總之是一款非常優(yōu)秀的vue拖拽組件丹诀。本篇將介紹如何搭建環(huán)境及簡單的例子钝的,使用起來特別簡單對被拖拽元素也沒有CSS樣式的特殊要求翁垂。
注意:只支持vue2
安裝:npm i -S vuedraggable
使用:在需要的組件里引入vuedraggable
1. 簡單使用
<template>
<div>
<div>演示拖拽功能</div>
<draggable chosenClass="chosen" forceFallback="true" group="people" @start="start" @end="end" animation="500">
<div class="item" v-for="item in 10" :key="item">{{ item }}</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
methods: {
start(e) {
console.log(e);
},
end(e) {
console.log(e);
},
},
};
</script>
<style lang="less" scoped>
.item{
margin: 0 auto;
width: 400px;
height: 50px;
line-height: 50px;
background-color: #f1f3f4;
margin: 10px auto;
border: 2px dashed transparent;
&:hover{
border: 2px dashed blueviolet;
}
}
</style>
2.屬性說明
屬性名稱 | 說明 |
---|---|
group | :group= "name",相同的組之間可以相互拖拽 |
sort | :sort= "true",是否開啟內(nèi)部排序,如果設(shè)置為false,它所在組無法排序硝桩,在其他組可以拖動排序 |
delay | :delay= "0", 鼠標按下后多久可以拖拽 |
touchStartThreshold | 鼠標移動多少px才能拖動元素 |
disabled | :disabled= "true",是否啟用拖拽組件 |
animation | 拖動時的動畫效果沿猜,還是很酷的,數(shù)字類型。如設(shè)置animation=1000表示1秒過渡動畫效果 |
handle | :handle=".mover" 只有當鼠標移動到css為mover類的元素上才能拖動 |
filter | :filter=".unmover" 設(shè)置了unmover樣式的元素不允許拖動 |
draggable | :draggable=".item" 那些元素是可以被拖動的 |
ghostClass | :ghostClass="ghostClass" 設(shè)置拖動元素的占位符類名,你的自定義樣式可能需要加!important才能生效碗脊,并把forceFallback屬性設(shè)置成true |
chosenClass | :ghostClass="hostClass" 被選中目標的樣式啼肩,你的自定義樣式可能需要加!important才能生效,并把forceFallback屬性設(shè)置成true |
dragClass | :dragClass="dragClass"拖動元素的樣式衙伶,你的自定義樣式可能需要加!important才能生效祈坠,并把forceFallback屬性設(shè)置成true |
dataIdAttr | dataIdAttr: 'data-id' |
forceFallback | 默認false,忽略HTML5的拖拽行為矢劲,因為h5里有個屬性也是可以拖動赦拘,你要自定義ghostClass chosenClass dragClass樣式時,建議forceFallback設(shè)置為true |
fallbackClass | 默認false卧须,克隆的DOM元素的類名 |
allbackOnBody | 默認false另绩,克隆的元素添加到文檔的body中 |
fallbackTolerance | 拖拽之前應(yīng)該移動的px |
scroll | 默認true,有滾動區(qū)域是否允許拖拽 |
scrollFn | 滾動回調(diào)函數(shù) |
scrollSensitivity | 距離滾動區(qū)域多遠時,滾動滾動條 |
scrollSpeed | 滾動速度 |
更多使用技巧可以看文檔:[vue.draggable中文文檔]