給組件添加拖拽對齊輔助線

本文首發於個人博客網站

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