vue draggable resizable 实现可拖拽缩放的组件功能

虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。

所以也就一直没有将 冲突检测 以及 吸附对齐 功能适配到2.0版本，最近正好有时间就适配一下。

新增特征

冲突检测
吸附对齐
默认样式优化

功能预览

项目地址

github.com/gorkys/vue-…

如果喜欢该项目，欢迎 Star

新增Props

isConflictCheck

Type: Boolean

Required: false

Default: false

定义组件是否开启冲突检测。

<vue-draggable-resizable :is-conflict-check=\"true\">

snap

Type: Boolean

Required: false

Default: false

定义组件是否开启元素对齐。

<vue-draggable-resizable :snap=\"true\">

snapTolerance

Type: Number

Required: false

Default: 5

当调用 snap 时，定义组件与元素之间的对齐距离，以像素(px)为单位。

<vue-draggable-resizable :snap=\"true\" :snap-tolerance=\"20\">

其它属性请参考 vue-draggable-resizable 官方文档

安装使用

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

全局注册组件

//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 style=\"height: 500px; width: 500px; border: 1px solid red; position: relative;\">
  <vdr :w=\"100\" :h=\"100\" v-on:dragging=\"onDrag\" v-on:resizing=\"onResize\" :parent=\"true\">
   <p>Hello! I\'m a flexible component. You can drag me around and you can resize me.<br>
   X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>
  </vdr>
  <vdr
   :w=\"200\"
   :h=\"200\"
   :parent=\"true\"
   :debug=\"false\"
   :min-width=\"200\"
   :min-height=\"200\"
   :isConflictCheck=\"true\"
   :snap=\"true\"
   :snapTolerance=\"20\"
  >
  </vdr>
 </div>
</template>

<script>
import vdr from \'vue-draggable-resizable-gorkys\'
import \'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css\'
export default {
 components: {vdr},
 data: function () {
  return {
   width: 0,
   height: 0,
   x: 0,
   y: 0
  }
 },
 methods: {
  onResize: function (x, y, width, height) {
   this.x = x
   this.y = y
   this.width = width
   this.height = height
  },
  onDrag: function (x, y) {
   this.x = x
   this.y = y
  }
 }
}
</script>

以上所述是小编给大家介绍的vue draggable resizable 实现可拖拽缩放的组件功能 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！