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

本文首发于个人博客网站

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

给组件添加拖拽对齐辅助线相关推荐

css拖拽调整高度,两种为wangEditor添加拖拽调整高度的方式：CSS3和jQuery UI
wangEditor是一款优秀的Web富文本编辑器,但如果能像KindEditor那样支持拖拽调整高度就更好了.有两种方式可以为wangEditor添加这一功能,这里使用的wangEditor版本为2 ...
JS 拖拽对齐参考线+自动吸附+对齐到网格
具体代码参见:https://github.com/yyccmmkk/js-reference-line [需求] 对一个元素进行拖拽时,生成这个组件和其它组件对齐的参考线,实现各组件间四条边及水平中 ...
react拖拉流程图_react 拖拽组件自由拖拽,垂直水平拖拽
import React, { useEffect, useState } from "react" import { Tree, message } from 'antd'; / ...
element-UI ，Table组件实现拖拽效果
拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...
js：为窗口盒子添加拖拽事件
一,在网页中添加一个独立的显示窗口,为窗口添加onmousedown和onmouseup事件来使窗口可以通过鼠标的拖拽移动. <!DOCTYPE html> <html> &l ...
Vue2 + ant design vue1.7.8版本 Table组件手动拖拽、可伸缩列功能
低版本的antd table组件官网文档上有可伸缩列功能,但是用起来有很明显的bug,无法直接拿来用:接下来给大家提供一个手写的拖拽方案: 1.首先,写好v-table组件,这里最重要的就是tabl ...
html百度地图拖动,百度地图为marker添加拖拽事件
百度的API里面并没有,但是百度的好多方法都和谷歌地图的类似,参照谷歌地图写法,写了一个简单拖拽事件 body, html,#allmap {width: 100%;height: 100%;over ...
vue项目添加拖拽功能
客户突然新增一个需求,菜单可以拖拽排序!!!!总是突然提一些脑抽的需求!!! 首先安装vue拖拽的插件,安装依赖包 npm install vuedraggable 然后呢就可以在项目中使用啦 imp ...
Vue 实现拖拽模块(一)拖拽添加组件
本文主要介绍了vue拖拽组件实现构建页面的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue拖拽添加组件的简单实现,具体如下: 效果图实现思路使用 H5 的新特性 ...

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

给组件添加拖拽对齐辅助线相关推荐

最新文章

热门文章