说明：组件基于vue-draggable-resizable进行二次开发
距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。
虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。
所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本，最近正好有时间就适配一下。
新增特征
- 冲突检测
- 吸附对齐
- 默认样式优化
注意：英文版为官方原版，没有新增功能的演示。中文版为google翻译版本，新增功能在**
高级**目录下可查看
isConflictCheck
类型: Boolean
必需: false
默认: false
定义组件是否开启冲突检测。
<vue-draggable-resizable :is-conflict-check="true">snap
类型: Boolean
必需: false
默认: false
定义组件是否开启元素对齐。
<vue-draggable-resizable :snap="true">snapTolerance
类型: Number
必需: false
默认: 5
当调用snap时，定义组件与元素之间的对齐距离，以像素(px)为单位。
<vue-draggable-resizable :snap="true" :snap-tolerance="20">注意：英文版为官方原版，中文版为google翻译版本
$ 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>The MIT License (MIT). Please see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent