安装：
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‘
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>
demo:
https://mauricius.github.io/vue-draggable-resizable/
参数：
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 lefttm- Top middletr- Top rightmr- Middle rightbr- Bottom rightbm- Bottom middlebl- Bottom leftml- 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:
leftthe X position of the elementtopthe Y position of the elementwidththe width of the elementheightthe height of the element
Called whenever the component gets resized.
<vue-draggable-resizable @resizing="onResizing">
4.resizestop
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the elementwidththe width of the elementheightthe height of the element
Called whenever the component stops getting resized.
<vue-draggable-resizable @resizestop="onResizstop">
5.dragging
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the element
Called whenever the component gets dragged.
<vue-draggable-resizable @dragging="onDragging">
6.dragstop
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the element
Called whenever the component stops getting dragged.
<vue-draggable-resizable @dragstop="onDragstop">
引用：https://www.npmjs.com/package/vue-draggable-resizable#demo
原文地址：https://www.cnblogs.com/yycc11/p/9565915.html