给组件添加拖拽对齐辅助线

原創

2020-02-20 14:59

本文首发于个人博客网站

https://iiter.cn/blogs/33

之前用伪元素before和after实现了一版组件对齐辅助线，组件的拖拽缩放用的是这个库 Github直达
实现的功能为：点击组件的时候，组件高亮并且辅助线在左上角显示。如下图

奈何，领导看了不满意
说你这玩意拖拽的时候得四个角都实现啊。
并且说得是在拖拽移动的过程中才能出现，点击激活，组件高亮的时候不显示。
这…可把我给难住了
我着急啊，我上火啊，一缕缕的揪头发啊
愁完之后咋整啊，功能还得做啊不是
打开代码，随手给组件内部创建了四个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;
}

可以打开浏览器测试一番了，出来之后的样式酱紫的：
激活：

不激活：

我去，这竟然…好难看的样子!
说好的只在拖拽情况下显示呢？？？眼角流出的泪水，是我对生活的无奈！
又开始挠起了头发，摸着这日益增高的发际线…
嗯想了想貌似可以通过拖拽的时候给添加动态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{}
}

之后，在我们拖拽组件onmousedown的过程中，给当前组件动态添加class名mw-widget-show-guide，再在其onmouseup的时候，移除掉class名mw-widget-show-guide，效果是下面这样：

完美！
我扭头望了眼窗外，看见灰蒙蒙的雾霾中呼啸着冲出一架飞机，啪，放下一条横幅，上面写着：
程序员导航站 https://iiter.cn