Vue Draggable Resizable 3.0震撼发布：零代码构建可视化编辑器的终极方案

概述

Vue Draggable Resizable 是一个专为 Vue.js 设计的可拖拽和可调整大小的组件库。它提供了简单易用的 API，让您可以轻松创建可拖拽和可调整大小的元素，适用于构建仪表板、布局编辑器、可视化编辑器等应用场景。

特性

• 🎯 简单易用: 提供简洁的 API 和丰富的配置选项
• 🖱️ 拖拽功能: 支持鼠标拖拽移动元素
• 📏 调整大小: 支持拖拽调整元素尺寸
• 🎨 自定义样式: 完全可自定义的外观和交互效果
• 📱 响应式: 支持触摸设备操作
• 🔧 高度可配置: 丰富的配置选项满足各种需求
• 🎪 动画支持: 内置平滑的拖拽和调整动画
• 🎮 事件系统: 完善的事件回调机制

安装

NPM 安装

npm install vue-draggable-resizable

Yarn 安装

yarn add vue-draggable-resizable

CDN 引入

<script src="https://unpkg.com/vue-draggable-resizable@latest/dist/vue-draggable-resizable.umd.js"></script>

基础使用

全局注册

import { createApp } from "vue";
import VueDraggableResizable from "vue-draggable-resizable";

const app = createApp(App);
app.component("VueDraggableResizable", VueDraggableResizable);
app.mount("#app");

局部注册

<template>
  <div>
    <vue-draggable-resizable
      :w="200"
      :h="200"
      :x="0"
      :y="0"
      @dragging="onDrag"
      @resizing="onResize"
    >
      <div class="content">可拖拽和调整大小的内容</div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    VueDraggableResizable,
  },
  methods: {
    onDrag(x, y) {
      console.log("拖拽位置:", x, y);
    },
    onResize(x, y, width, height) {
      console.log("调整大小:", x, y, width, height);
    },
  },
};
</script>

<style>
.content {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

Props 配置

基础属性

属性	类型	默认值	说明
w	Number	200	组件宽度
h	Number	200	组件高度
x	Number	0	组件 X 坐标
y	Number	0	组件 Y 坐标
z	Number	0	组件层级

功能控制

属性	类型	默认值	说明
draggable	Boolean	true	是否可拖拽
resizable	Boolean	true	是否可调整大小
parent	Boolean	false	是否限制在父容器内
snap	Boolean	false	是否启用网格对齐
snapTolerance	Number	5	网格对齐容差
grid	Array	[1, 1]	网格大小 [x, y]
minWidth	Number	50	最小宽度
minHeight	Number	50	最小高度
maxWidth	Number	null	最大宽度
maxHeight	Number	null	最大高度

样式配置

属性	类型	默认值	说明
active	Boolean	false	是否激活状态
dragging	Boolean	false	是否正在拖拽
resizing	Boolean	false	是否正在调整大小
className	String	”	自定义 CSS 类名
class-name-handle	String	”	拖拽手柄的 CSS 类名
class-name-resizable	String	”	调整大小手柄的 CSS 类名

手柄配置

属性	类型	默认值	说明
handle	String	null	拖拽手柄选择器
resizeHandle	String	null	调整大小手柄选择器
resizeHandles	Array	[‘br’]	调整大小手柄位置

事件

拖拽事件

事件名	参数	说明
dragging	(x, y)	拖拽过程中触发
dragstop	(x, y)	拖拽结束时触发

调整大小事件

事件名	参数	说明
resizing	(x, y, width, height)	调整大小过程中触发
resizestop	(x, y, width, height)	调整大小结束时触发

其他事件

事件名	参数	说明
activated	–	组件激活时触发
deactivated	–	组件取消激活时触发
click	(event)	点击组件时触发

高级用法

网格对齐

<template>
  <vue-draggable-resizable
    :w="200"
    :h="200"
    :x="0"
    :y="0"
    :snap="true"
    :grid="[20, 20]"
    :snap-tolerance="10"
  >
    <div class="content">网格对齐内容</div>
  </vue-draggable-resizable>
</template>

父容器限制

<template>
  <div
    class="container"
    style="width: 500px; height: 400px; border: 1px solid #ccc;"
  >
    <vue-draggable-resizable :w="150" :h="150" :x="50" :y="50" :parent="true">
      <div class="content">限制在父容器内</div>
    </vue-draggable-resizable>
  </div>
</template>

自定义手柄

<template>
  <vue-draggable-resizable
    :w="200"
    :h="200"
    :x="0"
    :y="0"
    handle=".drag-handle"
    resize-handle=".resize-handle"
  >
    <div class="content">
      <div class="drag-handle">拖拽手柄</div>
      <div class="resize-handle">调整大小手柄</div>
      自定义手柄内容
    </div>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from "vue-draggable-resizable";

export default {
  components: {
    VueDraggableResizable,
  },
};
</script>

常见问题

Q: 如何禁用特定方向的调整大小？

A: 可以通过 resizeHandles 属性控制：

<vue-draggable-resizable :resize-handles="['br']">
  只允许右下角调整大小
</vue-draggable-resizable>

Q: 如何实现多选功能？

A: 需要结合外部状态管理：

<template>
  <vue-draggable-resizable
    v-for="item in items"
    :key="item.id"
    :active="selectedItems.includes(item.id)"
    @click="toggleSelection(item.id)"
  >
    <div class="item">{{ item.content }}</div>
  </vue-draggable-resizable>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [],
    };
  },
  methods: {
    toggleSelection(id) {
      const index = this.selectedItems.indexOf(id);
      if (index > -1) {
        this.selectedItems.splice(index, 1);
      } else {
        this.selectedItems.push(id);
      }
    },
  },
};
</script>

Q: 如何保存和恢复布局？

A: 使用 localStorage 或后端 API：

// 保存布局
saveLayout() {
  localStorage.setItem('layout', JSON.stringify(this.elements))
}

// 恢复布局
loadLayout() {
  const saved = localStorage.getItem('layout')
  if (saved) {
    this.elements = JSON.parse(saved)
  }
}

总结

Vue Draggable Resizable 是一个功能强大且易于使用的组件库，适用于各种需要拖拽和调整大小功能的场景。通过合理配置和自定义样式，可以创建出优秀的用户交互体验。