VUE2拖拽组件:vue-draggable-resizable-gorkys

vue-draggable-resizable-gorkys组件基于vue-draggable-resizable进行二次开发,

用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线

安装：

npm install --save vue-draggable-resizable-gorkys

全局引用：

import Vue from 'vue'
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

使用：

         <-- 拖拽组件 -->
        <vue-draggable-resizable
          :w="500"  :h="500"
          :x="0"
          :y="0"
          :parent="true"
          :debug="false"
          :snap="true"
          :snapTolerance="10"
          :grid="[1,1]"
          :isConflictCheck="false"
          :prevent-deactivation="false"
          :resizable="false"
          :min-width="50"
          :min-height="50"
          :scale-ratio="0.8"
          @dragging="onDrag"
          @contextmenu.prevent.native="rightClick"
          @resizing="resizing"
          @activated="activated"
          @dragstop="dragstop"
          @refLineParams="getRefLineParams"
          class-name-active="active-class"
          :draggable="false"
          :active="true"
        >

说明：

          :w="200"     :h="200"    :x="0"     :y="0"

w,h,x,y分别为：初始宽度、初始高度、初始X轴位置、初始Y轴位置

          :snap="true"    :snapTolerance="10"

snap为是否开启贴合 、snapTolerance需要填入多少像素内让这两个组件贴合

          :grid="[1,1]"

grid为一个数组，第一个值为每次拖拽组件时，X轴横向移动的距离，第一个值为每次拖拽组件时，Y轴纵向移动的距离

          :isConflictCheck="false"

isConflictCheck表示是否可以让组件重叠，true表示不可以重叠，false表示可以重叠

          :resizable="false"

resizable表示 是否是可调整大小的

          :min-width="50"     :min-height="50"

分别表示 调整大小的最小宽度以及最小高度

          :scale-ratio="0.7"

scale-ratio表示组件拖动百分比比例，如果是大屏设计器 根据调整大屏的比例设置这个值

         class-name-active="active-class"

class-name-active表示组件在激活状态下的CSS Class样式

          :draggable="false"

draggable表示组件是否时可拖动的

          :active="true"

active表示设置组件是否激活

        :parent="true"
parent属性表示 拖动不可超过父标签的范围

函数：
          @dragging="onDrag"
此函数为拖拽时会调用方法

          @contextmenu.prevent.native="rightClick"
此函数为右击时调用方法

          @resizing="resizing"
此函数为当调整大小时会调用方法

          @activated="activated"
此方法为当组件状态激活时调用方法

          @dragstop="dragstop"
此方法为当组件状态太取消激活时调用方法

          @refLineParams="getRefLineParams"
此方法为拖动时调用，但是只有在snap属性为true时调用