基于固定定位的选框功能实现代码
最近的项目涉及到一个支持批量操作的小需求,交互需要通过选框来触发。查阅一些资料发现,线上方案基本都是基于绝对定位布局。如果此方案用于全局框选择(在正文上),它仍然可以使用。然而,实际需求几乎总是针对某个领域。如果是通过绝对定位来实现,会比较繁琐,需要调整定位原点。以下描述了基于固定定位的框选择实现。
需求描述
按住鼠标左键,移动鼠标出现选择框。在移动鼠标的过程中,选中框选择范围内的元素,高亮显示并释放鼠标左键,弹出编辑框,批量操作所有选中的元素
事件绑定
首先,整理出需要使用的事件。
按住鼠标左键,因为没有原来的鼠标左键按压事件,所以用mousedown事件用setTimeout来模拟它。mousedown事件绑定到当前区域。使用标志变量mouseOn指示是否开始绘制
HandleMouseDown(e) {//如果(e.buttons!==1 || e .哪个!==1)返回;this . settimeid=window . settimeout(()={ this . mouseon=true;//设置this.startX=e.clientX的初始位置;this . starty=e . clienty;}, 300);},handleMouseUp(e) {//当MouseUp时清除计时器,如果保持时间小于300ms//,则mouseOn为false this。settimeidwindow。cleartimeout(这个。settimeid) if(!this.mouseOn)返回;}这里有一个小注意,就是clearTimeout必须写成window.clearTimeout,否则超时. close不是一个会在vue中报告的函数,具体原因还没有找到,所以有些大人物想了解一下。
鼠标移动,使用mousemove事件。Mouseup,使用mouseup事件,注意提升事件需要绑定到文档。因为用户的选框操作不会局限于当前区域,在任何位置释放鼠标都应该可以完成画框选择。
方框图
事件定义后,只需要用特定的绘图和判断逻辑填充少数事件。先从绘画的逻辑说起。在mousedown事件中,设置复选框的初始位置,即鼠标被按下的位置。这里我们预先写一个div来表示选择框。
div class=' promotion-range _ _ select ' ref=' select '/div . promotion-range _ _ select { background : # 598 Fe 6;位置:固定;宽度: 0;高度: 0;display:无;top : 0;left : 0;opacity:6指针事件:无;}按以显示该div并设置初始定位
这个。$ refs . select . style . CSS text=` display : block;left: $ { this.startX } pxtop : $ { this . starty } px width :0;高度:0;`;使用初始位置,在mousemove事件中,设置选取框的宽度、高度和位置。
handleMouseMove(e) { if(!this.mouseOn)返回;const $select=this。$ refs.selectconst _ w=e . ClientX-this . StartX;const _ h=e . clienty-this . starty;//选框可以是左选框。此时选框矩形左上角变成//鼠标移动的位置,需要判断。同理,宽度和高度的绝对值应该是这样的. top=_h 0?this . starty : e . clienty;this.left=_w 0?this . StartX : e . ClientX;this . width=Math . ABS(_ w);this . height=math . ABS(_ h);$ select . style . left=`$ { this . left } px `;$ select . style . top=`$ { this . top } px `;$ select . style . width=`$ { this . width } px `;$ select . style . height=`$ { this . height } px `;},如果使用绝对定位,需要校准坐标原点,在布局中嵌套多个相对定位容器非常麻烦。定位固定,不用考虑用哪个容器。
判断框中选择的内容
//获取目标元素const sellist=document . getelementsbyclassname(' promotion-range _ _ item-inner ');const {底部、左侧、右侧、顶部}=$ select . getboundingclientrect();for(设I=0;长度;i ) { const rect=selList[i]。getBoundingClientRect();const isIntersect=!(矩形顶底||矩形底顶||矩形右左||矩形左右);销售人员。class list[Isintersection?add ' : ' remove '](' is-editing ');}判断使用了getBoundingClientRect,定义引用自MDN
返回值是一个DOMRect对象,它是元素的getClientRects()方法返回的矩形的集合,也就是与元素相关的CSS边框的集合。
一个DOMRect对象包含一组只读属性——left,上、右、下,用来描述边框,单位是像素。除宽度和高度之外的属性相对于视口的左上角。
从定义可以看出,从getboundingclient得到的左、上、右、下是相对于视口左上角的,与固定定位的定义是一致的。因此,我们只需要比较所选框和所选元素的四个定位值。
矩形顶部底部选定元素位于选择框上方
矩形底部顶部选定元素位于选择框下方
从右向左选定的元素位于选择框的左侧
左右选定元素位于选择框的右侧
除了这四种情况,选中的框和选中的元素是有交集的,所以给这些div添加class,因为用户在移动过程中需要感知选中的元素,所以上面的方法也应该在mousemove中执行。
在mouseup中判断所选元素后,将选择框设置为显示:无。
功能演示地址
参考链接
https://www . JB 51 . net/article/161132 . htm https://developer . Mozilla . org/zh-CN/docs/Web/CSS/position https://developer . Mozilla . org/zh-CN/docs/Web/API/Element/getBoundingClientRect
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:基于固定定位的选框功能实现代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。