基于Fixed定位的框选功能
最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发。在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了,需要调整定位原点。下面介绍一种基于Fixed定位的框选实现。
需求描述
- 按住鼠标左键不放,移动鼠标出现选择框
- 在鼠标移动的过程中,在框选范围内的元素高亮
- 松开鼠标左键,弹出编辑框,批量操作所有被框选的元素
实现
事件绑定
首先梳理一下需要用到的事件。
按住鼠标左键,因为并没有原生的鼠标左键按下事件,所以使用mousedown事件配合setTimeout模拟实现。mousedown事件绑定在当前区域上。 使用一个标志变量mouseOn来代表是否开始绘制
handleMouseDown(e) {// 判断是否为鼠标左键被按下if (e.buttons !== 1 || e.which !== 1) return;this.settimeId = window.setTimeout(() => {this.mouseOn = true;// 设置选框的初始位置this.startX = e.clientX;this.startY = e.clientY;}, 300);
},
handleMouseUp(e) {//在mouseup的时候清除计时器,如果按住的时间不足300毫秒//则mouseOn为falsethis.settimeId && window.clearTimeout(this.settimeId)if (!this.mouseOn) return;
}
复制代码
鼠标移动,使用mousemove事件。 鼠标抬起,使用mouseup事件,注意抬起事件需要绑定在document上。因为用户的框选操作不会局限在当前区域,在任意位置松开鼠标都应能够结束框选的绘制。
选框绘制
在明确了事件之后,就只需要在几个事件中填充具体的绘制和判断逻辑了。先来看绘制的逻辑。在mousedown事件中,设置选框的初始位置,也就是鼠标按下的位置。这里我们提前写好一个div,用来代表选框。
<div class="promotion-range__select" ref="select"></div>
.promotion-range__select {background: #598fe6;position: fixed;width: 0;height: 0;display: none;top: 0;left: 0;opacity:.6;pointer-events: none;
}
复制代码
按下后显示这个div并且设置初始定位即可
this.$refs.select.style.cssText = `display:block;left:${this.startX}px;top:${this.startY}pxwidth:0;height:0;`;
复制代码
有了初始位置,在mousemove事件中,设置选框的宽高和定位。
handleMouseMove(e) {if (!this.mouseOn) return;const $select = this.$refs.select;const _w = e.clientX - this.startX;const _h = e.clientY - this.startY;//框选有可能是往左框选,此时框选矩形的左上角就变成//鼠标移动的位置了,所以需要判断。同理宽高要取绝对值this.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`;
},
复制代码
如果使用绝对定位,就要去校准坐标原点了,在布局中嵌套多个relative定位容器的情况下,就非常繁琐了。使用fixed定位就不需要考虑相对于哪个容器的问题了。
判断被框选的内容
//获取目标元素
const selList = document.getElementsByClassName("promotion-range__item-inner"
);
const { bottom, left, right, top } = $select.getBoundingClientRect();
for (let i = 0; i < selList.length; i++) {const rect = selList[i].getBoundingClientRect();const isIntersect = !(rect.top > bottom ||rect.bottom < top ||rect.right < left ||rect.left > right);selList[i].classList[isIntersect ? "add" : "remove"]("is-editing");
}
复制代码
判断使用了getBoundingClientRect,定义引用自MDN
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
从定义中可以看到getBoundingClientRect中获取的left、top、right和bottom是相对于视口左上角的,这和fixed定位的定义是一致的。因此,我们仅需要对比选框和被框选元素的四个定位值即可。
rect.top > bottom 被框选元素位于选框上方
rect.bottom < top 被框选元素位于选框下方
rect.right < left 被框选元素位于选框左侧
rect.left > right 被框选元素位于选框右侧
排除这四种情况以外就是选框和被框选元素存在交集,给这些div加上class,因为移动过程中也需要让用户感知到被框选的元素,所以上述方法在mousemove中也要执行。
在mouseup中判断被框选元素后,将选框置为display:none。
功能demo地址
github.com/juenanfeng/…
参考链接
www.jianshu.com/p/5052c6fd2…
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…
基于Fixed定位的框选功能相关推荐
- (手势识别)基于opencv的手势识别框选(一)图像处理
基于opencv的手势识别框选(一)图像处理 程序 获取图像 高斯处理 颜色阈值处理 程序 cap = cv2.VideoCapture(0) while True:ret , img = cap.r ...
- 基于leaflet完成框选功能(不随地图缩放)并截图打印
给定一个矩形框用于规定地图打印范围,并截图打印该范围,用户可以在此范围内进行标绘,需要满足以下要求: 1)初始状态下,矩形框不随着地图的放大.缩小.移动而变化位置:(解锁状态) 2)点击锁定按钮后,矩 ...
- C#制作QQ截图的自动框选功能的个人思路(三)自动框选
效果图: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- C#制作QQ截图的自动框选功能的个人思路(二)设置Hook
上一篇介绍了一下我的一个个人思路而已..这一篇来分析分析代码... 主要分为两大部分 第一部分 就是 那个自动框选的那部分了啊 第二部分 就是设置Hook(不然窗体一直禁用啊) 先来说说Hook 也就 ...
- vue2 实现鼠标左键拖拽实现框选功能
一.实现如图所示功能 二.鼠标mousedown事件和click事件重复,不设置click事件可以达到相同效果 // 代码如下 <template><el-dialogtitle=& ...
- UE4 RTS 框选功能实现
代码如下,可直接复制粘贴: Begin Object Class=/Script/BlueprintGraph.K2Node_InputKey Name="K2Node_InputKey_0 ...
- 【优秀课设】基于OpenCV的Python人脸识别、检测、框选(遍历目录下所有照片依次识别 视频随时标注)
基于OpenCV的Python人脸识别.检测.框选 (遍历目录下所有照片依次识别 视频随时标注) 移步: https://blog.csdn.net/weixin_53403301/article/d ...
- CorelDRAWX4的VBA插件开发(三十五)调用C++实现一键智能群组(第4节)递归调用框选工具
上一节没有讲到的递归函数diguiSelect,这一单独列出来讲一下 INT diguiSelect(long count, DOUBLE LX, DOUBLE BY, DOUBLE RX, DOUB ...
- vue3实现鼠标左键拖拽画矩形框框选功能
vue3 + elementuiPlus 实现鼠标左键拖拽画矩形框 框选列表功能,仿照桌面框选功能 效果如图: vue3鼠标框选 代码: <template><div class=& ...
最新文章
- 用Js的eval解析JSON中的注意点
- 一站式快速自助建站-超低价0代码建站套餐助你轻松拥有自己的网站
- OpenCV距离变换函数:distanceTransform()介绍
- acriviti流程经过节点后执行方法,serviceTask
- DVBS卫星识别流程
- 计算机网络(第八版)谢希仁
- Boost.Asio的使用技巧
- c 实现走迷宫流程图_迷宫求解(有流程图).doc
- Android APK脱壳--腾讯乐固、360加固一键脱壳
- MavLink 库 c++环境搭建及解ADS-B消息教程
- CS188 Project 4: Inference in Bayes Nets(4-6)
- linux连接mssql数据库,在Centos7下为PHP安装mssql扩展
- MATLAB—离散一元、二元、多元函数求导求梯度(二维、三维、多维空间)(diff和gradient)
- 医学心脏数据集分割建模实战
- 软件测试中7个令人吃惊的事实
- 物理机如何安装Linux centos7
- 文件改日期 电梯卡dump_求修改电梯卡的日期 及楼层更改成整栋楼都可刷
- ChargerFuelGauge (Riogande platform)
- 初学者之路——————离散卷积
- 如何快速开发灵活自定义报表