k-draggable-vue

概述

一个可创建拖拽/缩放/吸附窗口，并反馈数据联动的的vue插件

安装

npm i k-draggable-vue

使用方法

引入方式

main.js引入以下内容：

import KDraggableVue from 'k-draggable-vue'; 
import 'k-draggable-vue/k-draggable-vue.css';
Vue.component('k-draggable-vue', KDraggableVue);

Demo

/k-draggable-vue/demo/example.vue

属性

scale

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

width

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

height

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

limitations

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

window-list

• 说明：窗口列表
• 类型：Boolean
• 默认值：[]
• 必传字段
• 示例：

  [
    {
        id: 1,  窗口ID
        style:  窗口样式信息，除以下值外，不可随意添加
            {
                x:0,                x轴坐标
                y:0,                y轴坐标
                w:256,              宽
                h:256,              高
                zIndex: 1,          层级
                bg: '#0fda9d90'     背景色
            }
  ]

min-size

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

create-window-by-mouse

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

create-window-dom

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

active-window-id

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

adsorb-options

• 说明：吸附可选项(adsorb-options中的各元素均为可选项，未传的元素将使用默认值)
• 类型：Array
• 默认值：

[
    { 
        prop: 'disabled',   是否禁用吸附功能；
        value: false 
    }, 
    { 
        prop: 'threshold',  吸附最小阈值
        value: 15 
    }, 
    { 
        prop: 'preAdsorptionLine',  预吸附提示线
        value: true 
    }, 
    { 
        prop: 'preAdsorptionThreshold', 预吸附提示线阈值
        value: 30
    }, 
    { 
        prop: 'adsorbedLine',   已吸附提示线
        value: true 
    }
]

adsorb-coord-more

• 说明：需要自定义吸附的坐标点
• 类型：Array
• 默认值：[]
• 示例：传参的对象实际可以理解为一个窗口

  [
    {
        x:0,    // 窗口的左上角坐标x
        y:0,    // 窗口的左上角坐标y
        w:100,  // 窗口的宽
        h:100   // 窗口的高
    }
  ]

事件

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-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