一个可创建拖拽/缩放/吸附窗口,并反馈数据联动的的vue插件
支持拖拽/缩放吸附
支持【预吸附/已吸附】提醒线,
npm i k-draggable-vue
main.js引入以下内容:
import kDraggableVue from 'k-draggable-vue';
import 'k-draggable-vue/k-draggable-vue.css';
Vue.use(kDraggableVue);
- 说明:缩放比例(整个拖拽画布整体的实时缩放比例)
- 类型:Number
- 默认值:1
- 说明:画布的宽
- 数据类型:Number
- 必传,且必须大于0
- 说明:画布的高
- 类型:Number
- 必传,且必须大于0
- 说明:边界限制,是否允许超出画布范围,true-不允许负坐标;false-允许负坐标
- 类型:Boolean
- 默认值:false
- 说明:窗口列表
- 类型:Boolean
- 默认值:[]
- 必传字段
- 示例:[{id: 1,style:{x:0,y:0,w:256,height:256}] // id为窗口ID,style为窗口的位置信息,窗口的原点为左上角,x-x轴坐标,y-y轴坐标,w-宽,h-高
- 说明:窗口允许缩放的最小尺寸
- 类型:Object
- 默认值:{width: 32,height: 32}
- 说明:是否允许鼠标拖拽开窗
- 类型:Boolean
- 默认值:false
- 说明:承载拖拽开窗范围的QuerySelector,用于获取对应的dom,默认开窗范围为画布的dom(注意:先决条件:==createWindowByMouse==;其次,开窗范围会受==limitations==影响,当==createWindowByMouse==激活时,但==limitations==为true时,==createWindowDom==不会生效,使用默认开窗范围)
- 类型:HTMLObjectElement
- 默认值:null
- 说明:激活选中的窗口ID,即==windowList==中窗口的id
- 类型:String
- 默认值:''
- 说明:是否禁用窗口缩放
- 类型:Boolean
- 默认值:false
- 说明:鼠标在对应窗口上的mousedown时的反馈事件
- 回调参数:
返回一个对象,windowInfo.style为windowList中对应窗口的堆内存地址
{
mouseDownType: 'moveWinodw',
windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}
mouseDownType:鼠标按下事件的类型(moveWinodw:移动窗口;sbg-*:缩放窗口)
windowInfo:当前选中的窗口信息
- 说明:鼠标在对应窗口上的mousemove时的反馈事件
- 回调参数:
返回一个对象,windowInfo.style为windowList中对应窗口的堆内存地址
{
mouseDownType: 'moveWinodw',
windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}
mouseDownType:鼠标按下后鼠标移动事件的类型(moveWinodw:移动窗口;sbg-*:缩放窗口)
windowInfo:当前选中的窗口信息
- 说明:鼠标在对应窗口上的mouseup时的反馈事件
- 回调参数:
返回一个对象,windowInfo.style为windowList中对应窗口的堆内存地址
{
mouseDownType: 'moveWinodw',
windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}
mouseDownType:鼠标按下事件的类型(moveWinodw:移动窗口;sbg-*:缩放窗口)
windowInfo:当前选中的窗口信息
- 说明:拖拽开窗时的反馈事件
- 回调参数:
返回一个对象
{
"mouseDownOrigin": {
"clientX": 545,
"clientY": 317
},
"style": {
"display": "block",
"x": 206,
"y": 2,
"w": 144,
"h": 132
}
}
mouseDownOrigin:开窗时,鼠标按下的鼠标事件的clientX和clientY
windowInfo:本次开窗的数据信息
- 说明:窗口缩放前的反馈事件,给窗口缩放做特殊判断处理
- 回调参数:
返回如下参数:
mouseEv: 本次的鼠标事件,
tempStyle: 本次缩放生效之前的缓存数据,即下一次缩放结果,
currentWindow: 窗口当前的实时数据,
minSize: 窗口最小尺寸,
scale: 缩放比例,
scaleDirectionList: 缩放的拖动方向集合,当方向只有长度为1,对角方向长度为2
- 说明:鼠标在对应窗口上进行窗口缩放时的反馈事件
- 回调参数:
返回一个对象,windowInfo.style为windowList中对应窗口的堆内存地址
{
mouseDownType: 'sbg-*',
windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}
mouseDownType:鼠标按下后拖动的缩放方向事件的类型(moveWinodw:移动窗口;sbg-*:缩放窗口)
windowInfo:当前选中的窗口信息