Vue.Draggable

212 阅读2分钟
Draggable可以实现拖拽功能。
特性:
支持不同列表之间的拖拽
支持拖拽和选择文本
参数:
Object

配置项
group: string or array 分组用的,同一组的不同list可以相互拖动
sort: boolean 定义是否可以拖拽
delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间
touchStartThreshold:number (不清楚)
disabled: boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能
store:
animation: umber 单位:ms 动画时间
handle: selector 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动
filter: selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔
preventOnFilter: 当拖动filter时是否触发event.preventDefault()默认触发
draggable: selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放
ghostClass: selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式
chosenClass: selector 格式为简单css选择器的字符串,目标被选中时添加
dragClass:selector 格式为简单css选择器的字符串,目标拖动过程中添加
forceFallback: boolean 如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等
fallbackClass: string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式
dataIdAttr: data-id
scroll:boolean当排序的容器是个可滚动的区域,拖放可以引起区域滚动
scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配
scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30
scrollSpeed: number 滚动速度

move:
function,默认值:null

就是拖拽项时调用的函数
用来确定拖拽是否生效
返回null时可以生效
可以通过函数判断
有一个参数:evt
evt为object
draggedContext: 被拖拽元素的上下文
index:拖拽元素的指针
element: 拖拽数据本身
futureIndex: 拖动后的index
relatedContext: 拖入区域的上下文
index: 目标元素的index
element:目标数据本身
list: 拖入的列表
component:目标组件
事件:
start, add, remove, update, end, choose, sort, filter, clone

Tips:
option的disabled可以同时控制拖拽
sort可以控制其中一个