vue-drag-resize是专门为 Vue 开发的插件，与 Vue 的生态系统完美融合。它可以很容易地集成到现有的 Vue 项目中，无需复杂的配置和额外的依赖 具有以下特点：

功能强大
  • 提供灵活的拖拽功能，可轻松移动各种类型的组件或元素位置，满足复杂界面布局需求；
  • 支持精准调整大小，通过拖拽元素边缘或角落，精确控制元素尺寸，可单个或批量操作；
易于使用
  • 与 Vue 框架无缝集成，无需复杂配置和额外依赖，可直接在 Vue 组件中使用，便捷性高；
  • 拥有简洁的 API设计，文档清晰易懂，方便开发者快速上手；
高度可定制
  • 可对拖拽和调整大小的元素进行样式定制，包括边框样式、背景颜色、阴影等，与项目整体风格一致；
  • 提供丰富事件，开发者可根据事件执行特定业务逻辑，实时获取元素位置和大小信息；
性能优化
  • 具备高效的渲染性能，采用优化算法和渲染机制，在大规模数据和复杂界面下仍保持流畅操作；
  • 合理管理内存使用，避免内存泄漏和资源浪费，保证应用稳定性和性能；

1.安装vue-drag-resize插件

npm install vue-drag-resize --save

2.在main.js中注册为全局组件

import VueDragResize from "vue-drag-resize";
Vue.component("vue-drag-resize", VueDragResize);

3.在vue文件中引入组件

import VueDragResize from "vue-drag-resize";
export default {
  name: "VueDragResize",
  components: {
    VueDragResize,
  }
}

4.完整代码

<template>
  <div id="box">
    <VueDragResize
      :w="width"
      :h="height"
      :y="top"
      :x="left"
      :isActive="true"
      @resizing="resize"
      @dragging="resize"
    >
      <p>top：{{ top }} px</p>
      <p>left：{{ left }} px</p>
      <p>width：{{ width }} px</p>
      <p>height：{{ height }} px</p>
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize";

export default {
  name: "vue-drag-resize",
  components: {
    VueDragResize,
  },

  data() {
    return {
      top: 20,
      left: 20,
      width: 200,
      height: 200,
    };
  },

  methods: {
    resize(newRect) {
      this.top = newRect.top;
      this.left = newRect.left;
      this.width = newRect.width;
      this.height = newRect.height;
    },
  },
};
</script>
<style scoped>
.active {
  border: 2px dashed red;
  background: rgba(128, 138, 135, 0.3);
}
.active .content-container p {
  text-align: center;
}
</style>

vue-drag-resize属性:

active

  • 参数类型: Boolean
  • 是否必选：是，
  • 默认传值: false
  • 说明：确定组件是否应处于活动状态。 prop对更改做出反应，也可以与syncmodifier 一起使用以保持状态与父级同步。
<vue-draggable-resizable :active="true">

draggable

  • 参数类型: Boolean
  • 是否必选: false
  • 默认传值: true
  • 说明：定义组件应该是否可拖动。
<vue-draggable-resizable :draggable="false">

resizable

  • 参数类型: Boolean
  • 是否必选: false
  • 默认传值: true
  • 说明：定义组件是否可以调整大小。
<vue-draggable-resizable :resizable="false">

w

  • 参数类型: Number
  • 是否必选: false
  • 默认传值: 200
  • 说明：定义元素的初始宽度。
<vue-draggable-resizable :w="200">

h

  • 参数类型: Number
  • 是否必选: false
  • 默认传值: 200
  • 说明：定义元素的初始高度。
<vue-draggable-resizable :h="200">

minw

  • 参数类型: Number
  • 是否必选: false
  • 默认传值: 50
  • 说明：定义元素的最小宽度。
<vue-draggable-resizable :minw="50">

minh

  • 参数类型: Number
  • 是否必选: false
  • 默认传值: 50
  • 说明：定义元素的最小高度。
<vue-draggable-resizable :minh="50">

x

  • 参数类型: Number
  • 是否必选: false
  • 默认传值: 0
  • 说明：定义元素的初始x位置。
<vue-draggable-resizable :x="0">
``
**y**
- 参数类型: Number
- 是否必选: false
- 默认传值: 0
- 说明：定义元素的初始y位置。
```html
<vue-draggable-resizable :y="0">

z

  • 参数类型: Number|String
  • 是否必选: false
  • 默认传值: auto
  • 说明：定义元素的zIndex。
<vue-draggable-resizable :z="999">

handles

  • 参数类型: Array
  • 是否必选: false
  • 默认传值: ['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

  • 参数类型: String
  • 是否必选: false
  • 默认传值: both
  • 说明：定义元素可拖动的轴。可用值为x, y 或者 both.
<vue-draggable-resizable axis="x">

grid

  • 参数类型: Array
  • 是否必选: false
  • 默认传值: [1,1]
  • 说明：定义捕捉元素的网格。
<vue-draggable-resizable :grid="[1,1]">

parent

  • 参数类型: Boolean
  • 是否必选: false
  • 默认传值: false
  • 说明：将元素的移动和尺寸限制为父元素。
<vue-draggable-resizable :parent="true">

dragHandle

  • 参数类型: String
  • 是否必选: false
  • 说明：定义应该用于拖动组件的选择器。
<vue-draggable-resizable drag-handle=".drag">

dragCancel

  • 参数类型: String
  • 是否必选: false
  • 说明：定义应该用于阻止拖动初始化的选择器。
<vue-draggable-resizable drag-cancel=".drag">

maximize

  • 参数类型: Boolean
  • 是否必选: false
  • 默认传值: false
  • 说明：如果设置为true，则允许组件在双击时填充其父级。
<vue-draggable-resizable :maximize="true">

vue-drag-resize事件:

activated

  • 是否必选: false
  • 参数: -
  • 说明：单击组件时调用，以显示句柄。
<vue-draggable-resizable @activated="onActivated">

deactivated

  • 是否必选: false
  • 参数: -
  • 说明：每当用户单击组件外的任何位置时调用，以便停用它。
<vue-draggable-resizable @deactivated="onDeactivated">

resizing

  • 是否必选: false
  • 参数: left元素的X位置 top 元素的Y位置 width元素的宽度 height 元素的高度
  • 说明：每当组件调整大小时调用。
<vue-draggable-resizable @resizing="onResizing">

resizestop

  • 是否必选: false
  • 参数: left 元素的X位置 top 元素的Y位置 width 元素的宽度 height 元素的高度
  • 说明：每当组件停止调整大小时调用。
<vue-draggable-resizable @resizestop="onResizstop">

dragging

  • 是否必选: false
  • 参数: left 元素的X位置 top 元素的Y位置
  • 说明：每当拖动组件时调用。
<vue-draggable-resizable @dragging="onDragging">

dragstop

  • 是否必选: false
  • 参数: left元素的X位置 top 元素的Y位置
  • 说明：每当组件停止拖动时调用。
<vue-draggable-resizable @dragstop="onDragstop">

项目地址：https://github.com/gorkys/vue-draggable-resizable-gorkys

效果演示：

【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度_Vue