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

1.安装

npm install --save vue-draggable-resizable

2.导入

• 如果使用的地方较多可以选择在main.js中全局导入

import Vue from 'vue'
import vdr from 'vue-draggable-resizable-gorkys'

// 导入默认样式
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
Vue.component('vdr', vdr)

• 如果使用地方较少可以在需要的组件中局部导入

<template>
  <div>
    <vdr
      class="vdring"
      :parent="true"
      :w="300"
      :h="300"
      :min-width="225"
      :min-height="273"
    ></vdr>
  </div>
</template>
<script>
import vdr from 'vue-draggable-resizable-gorkys'
import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
export default {
  name: 'MydemoDrag',
  components: {vdr},
};
</script>

<style lang="scss" scoped>
.vdring{
  background: pink;
}
</style>

3.效果

4.常用属性

:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素

5.常用事件

@dragging="onDrag"  每当拖动组件时调用。
@resizing="onResize" 每当组件调整大小时调用。
@dragstop="onDragstop" 每当组件停止拖动时调用。
@resizestop="onResizstop" 每当组件停止调整大小时调用。
@deactivated="onDeactivated" 每当用户单击组件后再单击外的任何位置时调用。
@activated="onActivated" 单击组件时调用。

探索更多玩法请查看官网或在线演示