vue-draggable-resizable 拖拽缩放插件

安装：

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 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">

引用：https://www.npmjs.com/package/vue-draggable-resizable#demo