固定区域内自由拖拽位置，记录偏移量x，y
安装
npm install --save vue-draggable-resizable
示例代码
<template>
<div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
<vue-draggable-resizable :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>
</vue-draggable-resizable>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable' // 组件
import 'vue-draggable-resizable/dist/VueDraggableResizable.css' // 样式
export default {
data: function () {
return {
width: 0,
height: 0,
x: 0,
y: 0
}
},
components:{VueDraggableResizable },
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>
参数介绍
1.active--是否激活
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :active="true">
2.draggable--是否可拖拽
Type: Boolean
Required: false
Default: true
<vue-draggable-resizable :draggable="false">
3.resizable--是否可缩放
Type: Boolean
Required: false
Default: true
<vue-draggable-resizable :resizable="false">
4.w--初始宽度
Type: Number
Required: false
Default: 200
<vue-draggable-resizable :w="200">
5.h--初始高度
Type: Number
Required: false
Default: 200
<vue-draggable-resizable :h="200">
6.minw--最小宽度
Type: Number
Required: false
Default: 50
<vue-draggable-resizable :minw="50">
7.minh--最小高度
Type: Number
Required: false
Default: 50
<vue-draggable-resizable :minh="50">
8.x--初始位移x
Type: Number
Required: false
Default: 0
<vue-draggable-resizable :x="0">
9.y-初始位移y
Type: Number
Required: false
Default: 0
<vue-draggable-resizable :y="0">
10.z--显示层级
Type: Number|String
Required: false
Default: auto
<vue-draggable-resizable :z="999">
11.handles--控制区域
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
- tl - Top left
- tm - Top middle
- tr - Top right
- mr - Middle right
- br - Bottom right
- bm - Bottom middle
- bl - Bottom left
- ml - Middle left
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
12：axis--设置拖拽方向（x,y,both）
Type: String
Required: false
Default: both
<vue-draggable-resizable axis="x">
13: grid--网格移动
Type: Array
Required: false
Default: [1,1]
<vue-draggable-resizable :grid="[1,1]">
14： parent--限制在父元素内移动
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :parent="true">
15：dragHandle--定义拖拽元素
Type: String
Required: false
<vue-draggable-resizable drag-handle=".drag">
16： dragCancel--Defines a selector that should be used to prevent drag initialization.
Type: String
Required: false
<vue-draggable-resizable drag-cancel=".drag">
17： maximize--If set to true allows the component to fill its parent when double-clicked.
Type: Boolean
Required: false
Default: false
<vue-draggable-resizable :maximize="true">
事件
1.activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
<vue-draggable-resizable @activated="onActivated">
2.deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
<vue-draggable-resizable @deactivated="onDeactivated">
3.resizing
Required: false
Parameters:
- left the X position of the element
- top the Y position of the element
width the width of the element
height the height of the element
Called whenever the component gets resized.
<vue-draggable-resizable @resizing="onResizing">
4.resizestop
Required: false
Parameters:
- left the X position of the element
- top the Y position of the element
width the width of the element
height the height of the element
Called whenever the component stops getting resized.
<vue-draggable-resizable @resizestop="onResizstop">
5.dragging
Required: false
Parameters:
- left the X position of the element
- top the Y position of the element
Called whenever the component gets dragged.
<vue-draggable-resizable @dragging="onDragging">
6.dragstop
Required: false
Parameters:
- left the X position of the element
- top the Y position of the element
Called whenever the component stops getting dragged.
<vue-draggable-resizable @dragstop="onDragstop">
