自由拖拽
支持元素自由拖拽，可限制在指定范围内移动。提供边界限制功能，确保元素不会移出画布或父容器。
draggable-resizable-rotatable 是一款功能强大的 Vue 3 可拖拽、可调整大小、可旋转工具库。 支持16点拖拽旋转、8方向调整元素大小、圆角独立调整、方向键微调等丰富功能， 专为画布编辑器、设计工具、交互式图表等应用场景打造。
支持拖拽、调整大小、旋转、圆角调整等16种控制点，满足各种复杂场景需求
支持元素自由拖拽，可限制在指定范围内移动。提供边界限制功能，确保元素不会移出画布或父容器。
支持8个方向调整元素尺寸：上下左右四边 + 四角。可设置最小/最大宽高限制，保持合理的元素大小。
独特的16点拖拽旋转控制，通过拖拽控制点实现精确旋转。支持顺时针/逆时针旋转，精度可调。
支持单独调整元素圆角，可显示圆角控制器。四个角可以独立调整，创造多样化的边框效果。
支持禁用和重新启用元素操作。可锁定宽高比、锁定位置、锁定旋转，提供灵活的控制能力。
支持使用键盘方向键微调元素位置。按住Shift可加速移动，精确到像素级别的位置调整。
实时显示元素坐标位置和尺寸信息。方便设计师精确了解元素位置，提高工作效率。
支持限制元素在画布或父容器范围内移动。开启边界限制后，元素将无法移出指定区域。
支持锁定元素宽高比，调整大小时自动保持原始比例。特别适合图片、图标等需要保持比例的元素。
支持编辑模式，一键禁用拖拽和方向键控制。适合用于预览状态，防止误操作。
支持设置元素层级，管理堆叠顺序。通过z-index属性自由控制元素的上下覆盖关系。
支持元素吸附对齐，网格吸附功能让元素自动对齐到网格线，保持画布整洁有序。
体验拖拽、调整大小、旋转的流畅交互。我们的16点拖拽旋转系统让您可以轻松操控元素的每一个细节。
简单几步，快速集成拖拽旋转功能到您的Vue 3项目
使用DraggableResizableRotatable组件，传入控制器配置和舞台配置，即可实现完整的拖拽、调整大小、旋转功能。
<template>
<DraggableResizableRotatable
:controller="draggableItem"
:stage="stageConfig"
:active="isSelected"
@selected="handleSelect"
@drag-end="handleDragEnd"
>
<div class="content">可拖拽内容</div>
</DraggableResizableRotatable>
</template>
通过IDraggable接口配置元素的属性，通过IStage接口配置舞台/画布的属性。详细配置选项请参考API文档。
const draggableItem = ref<IDraggable>({
x: 100,
y: 100,
w: 200,
h: 150,
rotate: 0,
resizable: true,
rotatable: true,
draggable: true,
minWidth: 50,
minHeight: 50,
showIndicator: true,
allowArrowKeys: true,
});
完整的类型定义和配置选项说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| x | number | - | 元素左上角X坐标 |
| y | number | - | 元素左上角Y坐标 |
| w | number | - | 元素宽度 |
| h | number | - | 元素高度 |
| rotate | number | 0 | 旋转角度（度） |
| draggable | boolean | true | 是否允许拖拽 |
| resizable | boolean | false | 是否允许调整大小 |
| rotatable | boolean | false | 是否允许旋转 |
| minWidth | number | 10 | 最小宽度 |
| minHeight | number | 10 | 最小高度 |
| lockAspectRatio | boolean | false | 是否锁定宽高比 |
| limitBoundaries | boolean | - | 是否限制在边界内 |
| showIndicator | boolean | false | 是否显示坐标指示器 |
| allowArrowKeys | boolean | false | 是否允许方向键控制 |
| editMode | boolean | false | 编辑模式（禁用拖拽和方向键） |
| disabled | boolean | false | 是否完全禁用 |
| 属性名 | 类型 | 说明 |
|---|---|---|
| scale | number | 画布缩放比例 |
| x | number | 舞台X轴偏移量 |
| y | number | 舞台Y轴偏移量 |
| width | number | 舞台宽度 |
| height | number | 舞台高度 |
了解draggable-resizable-rotatable与其他类似库的区别
| 功能特性 | draggable-resizable-rotatable | 其他拖拽库 |
|---|---|---|
| 拖拽功能 | 支持 | 支持 |
| 调整大小 | 8方向 | 部分支持 |
| 旋转功能 | 支持 | 部分支持 |
| 16点拖拽旋转 | 独有 | 不支持 |
| 圆角独立调整 | 支持 | 不支持 |
| 方向键微调 | 支持 | 部分支持 |
| 坐标实时显示 | 支持 | 不支持 |
| 宽高比锁定 | 支持 | 支持 |
| 边界限制 | 支持 | 支持 |
| TypeScript支持 | 100% | 部分支持 |