k-draggable-vue v1.0.16

概述

一个可创建拖拽/缩放/吸附窗口，并反馈数据联动的的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);

属性

scale

• 说明：缩放比例(整个拖拽画布整体的实时缩放比例)
• 类型：Number
• 默认值：1

width

• 说明：画布的宽
• 数据类型：Number
• 必传，且必须大于0

height

• 说明：画布的高
• 类型：Number
• 必传，且必须大于0

limitations

• 说明：边界限制,是否允许超出画布范围，true-不允许负坐标;false-允许负坐标
• 类型：Boolean
• 默认值：false

windowList

• 说明：窗口列表
• 类型：Boolean
• 默认值：[]
• 必传字段
• 示例：{id: 1,style:{x:0,y:0,w:256,height:256} // id为窗口ID，style为窗口的位置信息，窗口的原点为左上角，x-x轴坐标，y-y轴坐标，w-宽，h-高

minSize

• 说明：窗口允许缩放的最小尺寸
• 类型：Object
• 默认值：{width: 32,height: 32}

createWindowByMouse

• 说明：是否允许鼠标拖拽开窗
• 类型：Boolean
• 默认值：false

createWindowDom

• 说明：承载拖拽开窗范围的QuerySelector，用于获取对应的dom，默认开窗范围为画布的dom(注意：先决条件：==createWindowByMouse==；其次，开窗范围会受==limitations==影响，当==createWindowByMouse==激活时，但==limitations==为true时，==createWindowDom==不会生效，使用默认开窗范围)
• 类型：HTMLObjectElement
• 默认值：null

activeWindowId

• 说明：激活选中的窗口ID，即==windowList==中窗口的id
• 类型：String
• 默认值：''

window-scale-disabled

• 说明：是否禁用窗口缩放
• 类型：Boolean
• 默认值：false

事件

window-mousedown

• 说明：鼠标在对应窗口上的mousedown时的反馈事件
• 回调参数：

返回一个对象，windowInfo.style为windowList中对应窗口的堆内存地址
{ 
  mouseDownType: 'moveWinodw', 
  windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}

mouseDownType：鼠标按下事件的类型(moveWinodw:移动窗口；sbg-*:缩放窗口)
windowInfo：当前选中的窗口信息

window-mousemove

• 说明：鼠标在对应窗口上的mousemove时的反馈事件
• 回调参数：

返回一个对象，windowInfo.style为windowList中对应窗口的堆内存地址
{ 
  mouseDownType: 'moveWinodw', 
  windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}

mouseDownType：鼠标按下后鼠标移动事件的类型(moveWinodw:移动窗口；sbg-*:缩放窗口)
windowInfo：当前选中的窗口信息

window-mouseup

• 说明：鼠标在对应窗口上的mouseup时的反馈事件
• 回调参数：

返回一个对象，windowInfo.style为windowList中对应窗口的堆内存地址
{ 
  mouseDownType: 'moveWinodw', 
  windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}

mouseDownType：鼠标按下事件的类型(moveWinodw:移动窗口；sbg-*:缩放窗口)
windowInfo：当前选中的窗口信息

window-created

• 说明：拖拽开窗时的反馈事件
• 回调参数：

返回一个对象
{
    "mouseDownOrigin": {
        "clientX": 545,
        "clientY": 317
    },
    "style": {
        "display": "block",
        "x": 206,
        "y": 2,
        "w": 144,
        "h": 132
    }
}

mouseDownOrigin：开窗时，鼠标按下的鼠标事件的clientX和clientY
windowInfo：本次开窗的数据信息

before-scale

• 说明：窗口缩放前的反馈事件，给窗口缩放做特殊判断处理
• 回调参数：

返回如下参数:
mouseEv: 本次的鼠标事件, 
tempStyle: 本次缩放生效之前的缓存数据，即下一次缩放结果, 
currentWindow: 窗口当前的实时数据, 
minSize: 窗口最小尺寸, 
scale: 缩放比例, 
scaleDirectionList: 缩放的拖动方向集合，当方向只有长度为1，对角方向长度为2

window-mousescale

• 说明：鼠标在对应窗口上进行窗口缩放时的反馈事件
• 回调参数：

返回一个对象，windowInfo.style为windowList中对应窗口的堆内存地址
{ 
  mouseDownType: 'sbg-*', 
  windowInfo: {id: 1,style:{x:0,y:0,w:256,height:256}
}

mouseDownType：鼠标按下后拖动的缩放方向事件的类型(moveWinodw:移动窗口；sbg-*:缩放窗口)
windowInfo：当前选中的窗口信息