拖动和调整div大小vue-draggable-resizable组件

此组件是Vue 用于可调整大小和可拖动元素并支持冲突检测、元素吸附、元素对齐、辅助线。

文档https://tingtas.com/vue-draggable-resizable-gorkys 1、安装

npm install --save vue-draggable-resizable

2、引入组件

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

// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

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

3、使用

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <vue-draggable-resizable :w="100" :h="100" @dragging="onDrag" @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>

:w 默认宽度

:h 默认高度

:x="50" 默认水平坐标 注意相对元素是谁

:y="50" 默认垂直最表 注意相对元素是谁

:min-width="50" 最小宽度

:min-height="50" 最小高度

:parent="true" 限制不能拖出父元素

parent=".p-event" 限制不能拖出class为p-event的元素

:grid 水平和垂直移动 每次分别能够走多少像素