vue可拖动可放大div_vue-draggable-resizable 可拖拽缩放的组件

Vue 用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐

更新2.0版本

距离上1.7版本版本的修改已经过去快一年的时间了，原版组件在之前已经更新到了2.0版本。

虽然之前适配过旧版组件，但是因为2.0版本原作者对代码进行了重构，原来修改的代码照搬是不可能的了。

所以也就一直没有将冲突检测以及吸附对齐功能适配到2.0版本，最近正好有时间就适配一下。

新增特征

冲突检测

吸附对齐

默认样式优化

功能预览

项目地址

如果喜欢该项目，欢迎Star

前言

17年就应用此组件到了项目中，当时正式版的功能不能满足项目需求，还拉取了dev分支的测试版进行了简单的更改。(项目中主要功能之一需要用到此组件)

今年因为需求变更，项目重构(手动泪奔)，然后去看了看github,该组件的正式版本更新到了1.7.x，于是把正式版拉下来根据自己的需求进行了修改并发布新版到npm上。

特征

没有依赖

可拖动，可调整大小或者两者都行

拥有用于调整大小的控制点

限制组件调整大小和移动超出父元素

自定义网格移动

将拖动限制为垂直或水平移动

新增特征

组件之间的冲突检测(不允许组件之间重叠)

组件与组件之间进行对齐(类似于吸附效果)

项目地址

安装使用

npm install --save vue-draggable-resizable-gorkys

Demo

修改过程记录

提出建议

在原组件的Issues中提出了建议，作者表示不打算让此组件进行跨越组件之外的操作。

好吧，既然作者不打算进行这方面的支持，那只好自己动手了。

Clone项目

Fork项目到自己的仓库，然后Clone项目到本地进行修改。

需求说明

1.组件之间的冲突检测

两个组件不允许重叠，如果重叠，将回到移动或缩放前位置

用户移动一个组件到另一个组件边缘的时候，进行对齐操作。类似于吸附效果

代码修改

1.组件之间的冲突检测

首先是组件之间的冲突检测，组件与组件的边界检测需要一个标记进行判断。

先在props中加入一个isConflictCheck，让使用者自己选择是否使用此功能。

props:{

/* 定义组件是否开启冲突检测 */

isConflictCheck: {

type: Boolean, default: false

}

...

}

当我们拿到isConflictCheck后，在setConflictCheck方法中给组件的Dom设置一个data-*的属性。