基于Fixed定位的框选功能的实现代码


Posted in Javascript onMay 13, 2019

最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发。在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了,需要调整定位原点。下面介绍一种基于Fixed定位的框选实现。

需求描述

基于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为false
 this.settimeId && window.clearTimeout(this.settimeId)
 if (!this.mouseOn) return;
}

这里有一个小的注意点,就是clearTimeout一定要写成 window.clearTimeout ,否则在vue里会报错timeout.close is not a function,具体的原因尚未找到,有大佬了解望告知。

鼠标移动,使用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}px
                  width: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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Postman的下载及安装教程详解
Oct 16 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
使用原生js编写一个简单的框选功能方法
May 13 #Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 #Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 #Javascript
JavaScript封闭函数及常用内置对象示例
May 13 #Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 #Javascript
You might like
PHP读取xml方法介绍
2013/01/12 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
英语导游词
2015/02/13 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers
微信小程序调用python模型
2022/04/21 Python
Golang解析JSON对象
2022/04/30 Golang
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers