给拖拽缩放的组件添加对齐辅助线
本文首发于个人技术网站
艾特网 - 程序员导航站
之前用伪元素before和after实现了一版组件对齐辅助线，组件的拖拽缩放用的是这个库 Github直达
实现的功能为：点击组件的时候，组件高亮并且辅助线在左上角显示。如下图
image
奈何，领导看了不满意
说你这玩意拖拽的时候得四个角都实现啊。
并且说得是在拖拽移动的过程中才能出现，点击激活，组件高亮的时候不显示。
这......可把我给难住了
我着急啊，我上火啊，一缕缕的揪头发啊
愁完之后咋整啊，功能还得做啊不是
打开代码，随手给组件内部创建了四个position为absolute的div。辅助线想多长，宽高就给多长，咱里给的是500px 咱也不知道为啥要给500，反正跟250是亲戚
哦当然，父组件必须要有position
左上右上左下右下各分配一个div，因有1px边框，辅助线div的left和top的绝对值多+2
左上角div样式如下，将左、上边框置为none。
.guide-leftTop {
left: -502px;
top: -502px;
border: 1px dashed #2ab1e8;
border-top: none;
border-left: none;
}
右上角div样式如下，将右、上边框置为none。
.guide-rightTop {
right: -502px;
top: -502px;
border: 1px dashed #2ab1e8;
border-top: none;
border-right: none;
}
左下角div样式如下，将左、下边框置为none。
.guide-leftBottom {
left: -502px;
bottom: -502px;
border: 1px dashed #2ab1e8;
border-bottom: none;
border-left: none;
}
右下角div样式如下，将右、下边框置为none。
.guide-rightBottom {
right: -502px;
bottom: -502px;
border: 1px dashed #2ab1e8;
border-right: none;
border-bottom: none;
}
可以打开浏览器测试一番了，出来之后的样式酱紫的：
激活：
image
不激活：
image
我去，这竟然......好难看的样子!
说好的只在拖拽情况下显示呢？？？眼角流出的泪水，是我对生活的无奈！
又开始挠起了头发，摸一摸这日益增高的发际线......
嗯想了想 貌似可以通过拖拽的时候给添加动态class名去实现呀。
我激动不已，仿佛在我20多年的人生道路上又重新看到了希望，苍天有眼呐！
组件的class名为mw-widget，创建一个包裹所有辅助线div的class名mw-widget-show-guide，把它们紧紧的裹起来，放到和mw-widget的class名平级的地方，层级顺序在less或者scss下是酱紫的：
.mw-widget{
//...
}
.mw-widget-show-guide{
.guide-leftTop{
//...
}
.guide-rightTop{}
.guide-leftBottom{}
.guide-rightBottom{}
}
之后，在我们拖拽组件mousedown的过程中，给当前组件动态添加class名mw-widget-show-guide，再在其mouseup的时候，移除掉class名mw-widget-show-guide，效果是下面这样：
image
"高！实在是高！" 身边的同事一边鼓掌，一边对着我的发际线说。
个人导航小站，欢迎各位观众姥野支持： 程序员导航站
发表评论 (审核通过后显示评论)：