VueDraggableResizable

最新版本请移步

最新版本请移步

最新版本请移步

Vue 用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐

更新2.0版本

说明：组件基于vue-draggable-resizable进行二次开发

距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。

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

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

新增特征

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

功能预览

项目地址

https://github.com/gorkys/vue-draggable-resizable-gorkys

如果喜欢该项目，欢迎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时，定义组件与元素之间的对齐距离，以像素为单位。

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

安装新版本

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

---

原组件文档翻译

安装和基本用法

$ npm install --save vue-draggable-resizable

注册组件

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

现在可以在标记中使用该组件

<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
    }
  },
  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>

Props

active

Type: Boolean
Required: false
Default: false

确定组件是否应处于活动状态。 prop对更改做出反应，也可以与syncmodifier 一起使用以保持状态与父级同步。

<vue-draggable-resizable :active="true">

draggable

Type: Boolean
Required: false
Default: true

定义组件应该是否可拖动。

<vue-draggable-resizable :draggable="false">

resizable

Type: Boolean
Required: false
Default: true

定义组件是否可以调整大小。

<vue-draggable-resizable :resizable="false">

w

Type: Number
Required: false
Default: 200

定义元素的初始宽度。

<vue-draggable-resizable :w="200">

h

Type: Number
Required: false
Default: 200

定义元素的初始高度。

<vue-draggable-resizable :h="200">

minw

Type: Number
Required: false
Default: 50

定义元素的最小宽度。

<vue-draggable-resizable :minw="50">

minh

Type: Number
Required: false
Default: 50

定义元素的最小高度。

<vue-draggable-resizable :minh="50">

x

Type: Number
Required: false
Default: 0

定义元素的初始x位置。

<vue-draggable-resizable :x="0">

y

Type: Number
Required: false
Default: 0

定义元素的初始y位置。

<vue-draggable-resizable :y="0">

z

Type: Number|String
Required: false
Default: auto

定义元素的zIndex。

<vue-draggable-resizable :z="999">

handles

Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']

定义句柄数组以限制元素大小调整：

• tl - 左上角
• tm - 中上方
• tr - 右上角
• mr - 右中方
• br - 右下角
• bm - 下中方
• bl - 左下方
• ml - 左中方

<vue-draggable-resizable :handles="['tm','bm','ml','mr']">

axis

Type: String
Required: false
Default: both

定义元素可拖动的轴。可用值为x, y 或者 both.

<vue-draggable-resizable axis="x">

grid

Type: Array
Required: false
Default: [1,1]

定义捕捉元素的网格。

<vue-draggable-resizable :grid="[1,1]">

parent

Type: Boolean
Required: false
Default: false

将元素的移动和尺寸限制为父元素。

<vue-draggable-resizable :parent="true">

dragHandle

Type: String
Required: false

定义应该用于拖动组件的选择器。

<vue-draggable-resizable drag-handle=".drag">

dragCancel

Type: String
Required: false

定义应该用于阻止拖动初始化的选择器。

<vue-draggable-resizable drag-cancel=".drag">

maximize

Type: Boolean
Required: false
Default: false

如果设置为true，则允许组件在双击时填充其父级。

<vue-draggable-resizable :maximize="true">

---

Events

activated

Required: false
Parameters: -

单击组件时调用，以显示句柄。

<vue-draggable-resizable @activated="onActivated">

deactivated

Required: false
Parameters: -

每当用户单击组件外的任何位置时调用，以便停用它。

<vue-draggable-resizable @deactivated="onDeactivated">

resizing

Required: false
Parameters:

• left元素的X位置
• top 元素的Y位置
• width元素的宽度
• height 元素的高度

每当组件调整大小时调用。

<vue-draggable-resizable @resizing="onResizing">

resizestop

Required: false
Parameters:

• left 元素的X位置
• top 元素的Y位置
• width 元素的宽度
• height 元素的高度

每当组件停止调整大小时调用。

<vue-draggable-resizable @resizestop="onResizstop">

dragging

Required: false
Parameters:

• left 元素的X位置
• top 元素的Y位置

每当拖动组件时调用。

<vue-draggable-resizable @dragging="onDragging">

dragstop

Required: false
Parameters:

• left元素的X位置
• top 元素的Y位置

每当组件停止拖动时调用。

<vue-draggable-resizable @dragstop="onDragstop">

Gotchas

如果要在其父元素中限制组件，请小心使用x，y，w，h，minh和minh props的适当值。

Bonus

如果 resizing, parent 和maximize道具 为true ，您可以双击元素以使其填充父级。