一、npm上介绍 

网址：vue3-draggable-resizable - npm

 1、安装、下载

npm下载插件

$ npm install vue3-draggable-resizable

文件中引入：全局注册

// >main.js import { createApp } from 'vue' import App from './App.vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //default styles import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'   // You will have a global component named "Vue3DraggableResizable" createApp(App)   .use(Vue3DraggableResizable)   .mount('#app')

 在组件中使用

// >component.js import { defineComponent } from 'vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //default styles import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'   export default defineComponent({   components: { Vue3DraggableResizable }   // ...other })

 示范案例：

2、参数Props

1.设置长宽高等

initW：设置宽度；

initH：设置高度；

w：容器的当前宽度(px)，您可以使用“v-model:w”使其保持最新状态；

h：容器的当前高度(px)，您可以使用“v-model:h”使其保持最新状态；

x：容器的当前距离左边的距离(px)，您可以使用“v-model:x”使其保持最新状态；

y：容器的当前距离顶部的距离(px)，您可以使用“v-model:y”使其保持最新状态；

minW：设置最小宽度；

minH：设置最小高度；

2.设置状态

active：显示该组件是否被选中，您可以使用“v-model:active”使其保持最新状态；

draggable：定义组件是否可拖动；

resizable：定义组件是否可调整大小；

lockAspectRatio：lockAspectRatio属性用于锁定长宽比；

disabledX：定义组件是否可以在x轴上移动；

disabledY：定义组件是否可以在y轴上移动；

disabledW：定义组件的宽度是否可以修改；

disabledH：定义组件的高度是否可以修改；

parent：限制父节点内的移动和大小；

handles：定义枚举的大小数组来限制元素的大小调整

default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']

• tl : Top left
• tm : Top middle
• tr : Top right
• mr : Middle right
• ml : Middle left
• bl : Bottom left
• bm : Bottom middle
• br : Bottom right

3.是否开启某设置

classNameDraggable：用于在启用可拖动组件时设置可拖动可调整大小的组件的自定义类；

classNameResizable：用于在拖动时设置可拖动可调整大小的组件的自定义类；

classNameDragging：用于在拖动时设置可拖动可调整大小的组件的自定义类；

classNameResizing：用于在调整大小时设置可拖动可调整大小的组件的自定义类；

classNameActive：用于在活动时设置可拖动可调整大小的组件的自定义类；

classNameHandle：用于设置每个句柄元素的自定义公共类。

二、Vue3DraggableResizable

[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。

文档目录

• 特性
• 使用方法
  • 组件 Props
  • 组件 Events
  • 使用吸附对齐功能

特性

• 支持拖拽和缩放，可分别定义开启或关闭
• 自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭）
• 限制组件的拖动和缩放在其父节点内
• 自定义组件内各种类名
• 缩放句柄的类名也可自定义
• 元素吸附对齐
• 实时参考线
• 自定义参考线
• 使用 Vue3 和 ts

1、使用

$ npm install vue3-draggable-resizable

使用 use 方法注册组件

// >main.js import { createApp } from 'vue' import App from './App.vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //需引入默认样式 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'  // 你将会获得一个名为Vue3DraggableResizable的全局组件 createApp(App)   .use(Vue3DraggableResizable)   .mount('#app')

也可以单独在你的组件内部使用

// >component.js import { defineComponent } from 'vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //需引入默认样式 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'  export default defineComponent({   components: { Vue3DraggableResizable }   // ...other })

下面是一个使用 vue-template 语法写的例子

2、Props

initW

type: Number
default: null

设置初始宽度（px）

initH

type: Number
default: null

设置初始高度（px）

w

type: Number
default: 0

组件的当前宽度（px）
你可以使用“v-model:w”语法使它和父组件保持一致

h

type: Number
default: 0

组件的当前高度（px）
你可以使用“v-model:h”语法使它和父组件保持一致

x

type: Number
default: 0

组件距离父容器的左侧的距离（px）
你可以使用“v-model:x”语法使它和父组件保持一致

y

type: Number
default: 0

组件距离父容器顶部的距离（px）
你可以使用“v-model:y”语法使它和父组件保持一致

minW

type: Number
default: 20

组件的最小宽度（px）

minH

type: Number
default: 20

组件的最小高度（px）

active

type: Boolean
default: false

组件当前是否处于活跃状态
你可以使用“v-model:active”语法使它和父组件保持一致

draggable

type: Boolean
default: true

组件是否可拖动

resizable

type: Boolean
default: true

组件是否可调整大小

lockAspectRatio

type: Boolean
default: false

该属性用来设置是否锁定比例

disabledX

type: Boolean
default: false

是否禁止组件在 X 轴上移动

disabledY

type: Boolean
default: false

是否禁止组件在 Y 轴上移动

disabledW

type: Boolean
default: false

是否禁止组件修改宽度

disabledH

type: Boolean
default: false

是否禁止组件修改高度

parent

type: Boolean
default: false

是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭

handles

type: Array
default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']

定义缩放的句柄（共八个方向）

• tl : 上左
• tm : 上中
• tr : 上右
• mr : 中左
• ml : 中右
• bl : 下左
• bm : 下中
• br : 下右

classNameDraggable

type: String
default: draggable

自定义组件的类名，该类名在组件是“可拖动”时显示

classNameResizable

type: String
default: resizable

自定义组件类名，该类名在组件是“可缩放”时显示

classNameDragging

type: String
default: dragging

定义组件在拖动时显示的类名

classNameResizing

type: String
default: resizing

定义组件在缩放时显示的类名

classNameActive

type: String
default: active

定义组件在活跃状态下的类名

classNameHandle

type: String
default: handle

定义缩放句柄的类名

以上设置将会渲染出下面的缩放句柄节点（my-handle-*）

... 
 
 
 
 ...

3、Events

activated

payload: -

组件从非活跃状态到活跃状态时触发

deactivated

payload: -

组件从活跃状态到非活跃状态时触发

drag-start

payload: { x: number, y: number }

组件开始拖动时触发

dragging

payload: { x: number, y: number }v

组件在拖动过程中持续触发

drag-end

payload: { x: number, y: number }

组件拖动结束时触发

resize-start

payload: { x: number, y: number, w: number, h: number }

组件开始缩放时触发

resizing

payload: { x: number, y: number, w: number, h: number }

组件在缩放过程中持续触发

resize-end

payload: { x: number, y: number, w: number, h: number }

组件缩放结束时触发

使用吸附对齐功能

吸附对齐功能可以在拖动过程中和其他元素自动吸附，你也可以自定义吸附对齐的校准线

你需要引入另外一个组件来使用该特性

像下面这样，将 Vue3DraggableResizable 放在 DraggableContainer 内：

4、DraggableContainer Props

这些 props 适用于 DraggableContainer 组件

disabled

type: Boolean
default: false

关闭吸附对齐功能

        Test           Another test    

adsorbParent

type: Boolean
default: true

是否和父组件对齐，如果开启，则元素拖拽到父容器边缘（父容器的上中下左中右边）时会发生吸附，否则不会

        Test           Another test    

adsorbCols

type: Array
default: null

自定义列的校准线，元素在x轴上拖动到这些线附近时，会产生吸附

        Test           Another test    

adsorbRows

type: Array
default: null

自定义行的校准线，元素在y轴上拖动到这些线附近时，会产生吸附

        Test           Another test    

referenceLineVisible

type: Boolean
default: true

是否显示实时参考线，元素在产生自动吸附后，会有一条参考线线出现，如果不需要，可通过该选项关闭。

        Test           Another test    

referenceLineColor

type: String
default: #f00

实时参考线的颜色，默认红色

        Test           Another test    

3、事件

1.activated

2.deactivated

3.drag-start

4.dragging

5.drag-end

6.resize-start

7.resizing

8.resize-end

三、vue3基础组件使用

网址：Vue3DragResizeRotate

• 基本组件
• 自适应大小
• 最小宽高限制
• 最大宽高限制
• 组件插槽
• 控制是否处于活动状态
• 阻止失活
• 是否允许拖动位置
• 是否允许调整大小
• 是否允许旋转角度 (新增)
• 是否允许内部元素拖拽
• 限制允许拖动的范围
• 限制禁止拖动的范围
• 控制组件的z-index
• 控制拉伸手柄的数量
• 限制运动轴
• 限制用户选择
• 放缩 (新增)

1、基本

1.基本组件

最基本的组件，没有任何道具，甚至可以在父元素之外自由移动。

2.自适应大小

3.最小宽高限制

具有Min Height和Min Width基本组件的基本组件，最小高度和最小宽度分别由:minw 和:minh 属性控制。

4.最大宽高限制

具有Max Height和Max Width基本组件的基本组件，最大高度和最大宽度分别由 :max-height 和:max-width 属性控制。

5.组件插槽

一个基本组件，内部有一个表单。 输入应该是可聚焦的，按钮应该是可点击的。

6.控制是否处于活动状态

一个基本组件，带有active prop，用于控制组件外部的活动状态。

7.阻止失活

一个基本组件，带有prevent-deactivation prop，以避免在外部点击时解除活动状态。

8.是否允许拖动位置

一个基本组件，draggable prop设置为false，因此它不可拖动。

9.是否允许调整大小

一个基本组件，resizable prop设置为false，因此它不可调整大小。

10.是否允许旋转角度

一个基本组件，rotatable prop设置为true，因此它可以旋转角度。

11.是否允许内部元素拖拽

一个基本组件，enable-native-drag prop设置为true，以允许组件内部元素的拖动行为。 您可以通过使用球拖动每个组件来查看差异。 默认值为false。

12.限制允许拖动的范围

一个基本组件，只能通过一个句柄拖动，由prop drag-handle 和一个有效的CSS选择器来指定，只能通过该DOM元素来拖动组件。

13.限制禁止拖动的范围

一个基本组件，无法通过句柄拖动，由prop drag-cancel 和有效的CSS选择器来指定，该范围无法将无法拖动组件。

14.控制组件的z-index

一个基本组件，使用z-index prop来控制组件外部的z-index。 如果没有提供，它将采用值auto。

15.控制拉伸手柄的数量

您可以使用handles prop选择要为组件提供的句柄，它接受句柄数组。 例如，如果你想仅在横轴上进行成本调整，你只能提供左右句柄：handles =“['ml'，'mr']”。

16.限制运动轴

一个基本组件，使用axis来控制可拖动的轴。 合适的值是x，y或both。

17.限制用户选择

阻止用户选中组件内文本

18.放缩 

放缩时，建议保持父元素盒子和vue-drag-resize-rotate放缩值保持一致

2、网格对齐

1.网格20x20

一个基本组件，用grid = [20,20] prop来设置网格单元的尺寸（高度和宽度，以像素为单位）。

2.网格20x40

3.网格20x20+偏移10x10

始终从组件的左上角计算网格。 在此示例中，您可以看到它相对于父元素具有偏移量。 这对于父元素中的成本要求很重要。

4.网格20x40+偏移10x20+最小限制

如果您提供的minHeight和minWidth值低于相应的网格值，您可以注意到调整大小会停止到最低的合适值。 例如，在x轴上，尊重minWidth和grid [x]约束的最低有效值是40.同样适用于y轴。

5.网格20x40+偏移10x20+最大限制

如果提供的maxHeight和maxWidth值高于相应的网格值，则可以注意到调整大小会停止到较低的合适值。 例如，在x轴上，尊重maxWidth和grid [x]约束的最低有效值是80.这同样适用于y轴。

3、父级限制

1.父级容器基本案例

无法在其父元素之外拖动或调整大小的组件，使用prop ：parent =“true”定义。

2.父级+自适应

3.父级+最大限制

无法在其父元素之外拖动或调整大小的组件，使用 maxWidth 和 maxHeight 来限制其大小。

4.父级+网格

附加到网格的组件，不能在其父元素之外拖动或调整大小，使用prop ：parent =“true”定义。 在这种情况下，父级的大小完全匹配网格。

5.父级+网格+偏移

组件附加到具有小偏移的网格。 它的起始位置与父级的左上角不完全对齐。

6.父级+网格+最大限制

附加到网格的组件，无法在其父元素之外拖动或调整大小，使用 maxWidth 和 maxHeight 来限制其大小。 __Notice__使用20作为grid prop为 y轴，元素的maxHeight是280而不是290。

7.父级+控制组件

一个基本的父控制组件，x ，y ，w 和h 用于控制组件位置和大小的道具。 __Notice__使用grid prop，组件只会对网格值的有效倍数作出反应。

4、纵横比 

1.锁定纵横比

具有lock-aspect-ratio prop的组件，用于在调整大小期间保持组件的宽高比。

2.纵横比+最小限制

一个组件，lock-aspect-ratio prop和最小高度设置为100，最小宽度设置为50.请注意，锁定纵横比也会强制最小宽度为100（条件：1 / 1）。

3.纵横比+最大限制

一个组件，lock-aspect-ratio prop和 maxWidth 设置为300， maxHeight 设置为250。 请注意，锁定纵横比也会强制最大宽度为250。

4.纵横比+父级容器限制

在父级中使用的组件，lock-aspect-ratio prop用于在调整大小期间保持组件的宽高比。

5.纵横比+对齐网格

具有宽高比的组件在20x20网格上进行了受限

使用lock-aspect-ratio时，在网格上使用组件的成本并不是很好。 您可以通过拖动（例如右手柄或底部手柄）来注意到您有不同的结果。

6.在偏移的网格上对齐

7.在父级中对齐网格

8.外部传入纵横比参数 (新增)

具有lock-aspect-ratio prop的组件，用于在调整大小期间保持组件的宽高比。
设置outsideAspectRatio来控制组件的纵横比

5、样式

1.Style 组件

具有自定义类名的组件，由prop class-name 提供。

2.Style 拖动

在拖动时具有自定义类名的组件，由prop class-name-dragging 提供。

3.Style 拉伸

调整大小时具有自定义类名的组件，由prop class-name-resizing 提供。

4.Style 活跃

在活动状态下具有自定义类名的组件，由prop class-name-active 提供。

5.Style 句柄

具有handle的自定义类的组件，随prop class-name-handle 提供。 这样，您可以单独设置每个手柄的样式。

记得为句柄类设置position：absolute

6.Style 手柄插槽

具有句柄自定义标记的组件，由VueJS named slots提供（例如slot =“tl”）。

Slots | Vue.js

6、事件

1.激活组件事件

当组件被激活时，会发出activated()事件。 当组件被停用时，会发出deactivated()事件。

2.拖动位置事件

拖动组件时会发出dragging(x,y)事件。 拖动停止时会发生dragstop(x,y)事件。

3.调整大小事件

调整组件大小时会发出resizing(x,y,width,height)事件。 调整大小停止时会发出resizestop(x,y,width,height)事件。

4.旋转角度事件 

7、高级

1.位置冲突检测

开启冲突检测时，各个可拖拽组件之间不可重叠，冲突后当前元素回到原来的位置

2.元素位置吸附

设置:snap="true"开启吸附功能和设置:snapTolerance="20"可控制吸附判断距离

3.对齐时有辅助线

返回参数是一个Object,里面包含vLine与hLine，具体使用参考下面代码。

8、应用

1.同时拖动多个元素(20)

默认情况下，这不是组件提供的功能，但它是如何使用现有功能构建复杂方案的示例。

由于ctrl事件处理程序的注册方式，请确保在开始拖动元素之前单击容器内的任何位置。