vue2 实现鼠标左键拖拽实现框选功能

一、实现如图所示功能

二、鼠标mousedown事件和click事件重复，不设置click事件可以达到相同效果

// 代码如下
<template><el-dialogtitle="时间段选择":visible.sync="dialogVisible":close-on-click-modal="false"custom-class="custom-dialog-style"width="1000px":close="close"><div class="container"><div class="wrap"><div class="left"><div class="merge-column">星期/时间</div><div class="td-title" v-for="(weekItem, index) in week" :key="index">{{ weekItem }}</div></div><div class="right"><div class="top"><div class="merge-row">00:00-12:00</div><div class="merge-row">12:00-24:00</div><div class="unit" v-for="(item, index) in 24" :key="index">{{ index }}</div></div><div class="bottom" @mousedown="handleMouseDown"><div:style="'width:' + mask_width + 'left:' + mask_left + 'height:' + mask_height + 'top:' + mask_top"v-show="positionList.is_show_mask"class="mask"></div>// 鼠标mousedown事件和click事件重复，不设置click事件可以达到相同效果 @click="handleClickSelected(item)"<divclass="select-item"v-for="(item, index) in dataItem":key="index":class="{selected: item.selected ? true : false}"></div></div></div></div></div><div slot="footer"><el-button @click="close">取 消</el-button><el-button type="primary" @click="submit">确 定</el-button></div></el-dialog>
</template><script>
const positionList = {is_show_mask: false,box_screen_left: 0, // 盒子距离浏览器左侧的距离box_screen_top: 0, //盒子距离浏览器顶部的距离start_x: 0,start_y: 0,end_x: 0,end_y: 0
};
export default {data() {return {dialogVisible: false,week: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],totalNum: 336,dataItem: [],isClick: true,positionList: {...positionList}};},computed: {mask_width() {return `${Math.abs(this.positionList.end_x - this.positionList.start_x)}px;`;},mask_height() {return `${Math.abs(this.positionList.end_y - this.positionList.start_y)}px;`;},mask_left() {return `${Math.min(this.positionList.start_x, this.positionList.end_x) - this.positionList.box_screen_left}px;`;},mask_top() {return `${Math.min(this.positionList.start_y, this.positionList.end_y) - this.positionList.box_screen_top}px;`;}},methods: {init() { // ref 调用init弹窗即可this.dialogVisible = true;this.initList();},initList() {for (let i = 1; i <= this.totalNum; i++) {let map = {selected: false,key: i};this.dataItem.push(map);}},setData(value) {this.initList();value.forEach((v) => {this.dataItem[v-1].selected = true;});},handleMouseDown(event) {this.positionList.is_show_mask = true;this.positionList.start_x = event.clientX;this.positionList.start_y = event.clientY;this.positionList.end_x = event.clientX;this.positionList.end_y = event.clientY;this.positionList.box_screen_left = document.querySelector(".bottom").getBoundingClientRect().left;this.positionList.box_screen_top = document.querySelector(".bottom").getBoundingClientRect().top;document.body.addEventListener("mousemove", this.handleMouseMove); //监听鼠标移动事件document.body.addEventListener("mouseup", this.handleMouseUp); //监听鼠标抬起事件},handleMouseMove(event) {this.positionList.end_x = event.clientX;this.positionList.end_y = event.clientY;},handleMouseUp(event) {document.body.removeEventListener("mousemove", this.handleMouseMove);document.body.removeEventListener("mouseup", this.handleMouseUp);this.positionList = {...positionList};this.positionList.is_show_mask = false;this.handleDomSelect();this.resSetXY();},handleDomSelect() {const dom_mask = window.document.querySelector(".mask");// getClientRects()方法 每一个盒子的边界矩形的矩形集合const rect_select = dom_mask.getClientRects()[0];document.querySelectorAll(".select-item").forEach((node, index) => {const rects = node.getClientRects()[0];if (this.collide(rects, rect_select) === true) {this.dataItem[index].selected = !this.dataItem[index].selected;}});},collide(rect1, rect2) {const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);const minX = Math.min(rect1.x, rect2.x);const minY = Math.min(rect1.y, rect2.y);return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height;},resSetXY() {this.positionList.start_x = 0;this.positionList.start_y = 0;this.positionList.end_x = 0;this.positionList.end_y = 0;},handleClickSelected(item) {item.selected = !item.selected;},close() {this.dialogVisible = false;this.dataItem = [];},submit() {const list = [];for (let i = 0; i < this.dataItem.length; i++) {if (this.dataItem[i].selected == true) {list.push(this.dataItem[i].key);}}if (list.length == 0) {this.$message({message: "请选择时间段",type: "warning"});return;} else {this.close();this.$emit("event-data", list);}}}
};
</script><style lang="scss" scoped>
.container {.wrap {display: flex;border: 1px solid #f1f1f1;border-bottom: 0;.left {.merge-column {width: 4vw;height: 6vh;padding: 3px 5px;min-width: 76px;min-height: 55px;display: flex;align-items: center;border-right: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;}.td-title {width: 4vw;height: 3vh;min-height: 27px;min-width: 76px;padding: 3px 5px;text-align: center;border-right: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;}&:last-child {border-bottom: 0;}}.right {display: flex;flex-wrap: wrap;.top {width: 100%;display: flex;flex-wrap: wrap;align-content: flex-start;.merge-row {width: 50%;height: 3vh;padding: 3px 5px;min-width: 420px;min-height: 27px;text-align: center;border-right: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;&:nth-child(2) {border-right: 0;}}.unit {width: calc(100% / 24);height: 3vh;padding: 3px 5px;min-width: 35px;min-height: 27px;text-align: center;border-right: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;&:last-child {border-right: 0;}}}.bottom {width: 100%;position: relative;display: flex;flex-wrap: wrap;.mask {position: absolute;background: #409eff;opacity: 0.4;z-index: 100;left: 0;top: 0;}.select-item {width: calc(100% / 48);height: 3vh;min-width: 17px;min-height: 27px;cursor: pointer;padding: 3px 5px;border-right: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;&:hover {background: #f1f1f1;}}.selected {background: #7bc8ff;&:hover {background: #7bc8ff;}}*:nth-child(48n + 1) {border-right: 0;}}}}
}
</style>

参考文章：https://blog.csdn.net/qq_37656005/article/details/123656240

vue2 实现鼠标左键拖拽实现框选功能相关推荐

vue3实现鼠标左键拖拽画矩形框框选功能
vue3 + elementuiPlus 实现鼠标左键拖拽画矩形框框选列表功能,仿照桌面框选功能效果如图: vue3鼠标框选代码: <template><div class=& ...
C/C++实现水果忍者(四) 实现按鼠标左键划过水果消失的功能
文章目录实现水果被划掉就消失的功能,只需要添加显示与否的flag,判断鼠标的坐标是否碰到水果就可以了.感觉代码像面条一样拉长中- #include <easyx.h> #include ...
DOS窗口（控制台程序）禁用鼠标左键选择（暂停程序的功能）
一.界面设置 DOS窗口右击标题栏,选择属性,出现下图所示属性界面取消"快速编辑模式"勾选,点击"确定"按钮,就大功告成二.代码设置作为程序猿的我们,怎么 ...
检测单击鼠标左键并拖动的消息_计算机视觉OpenCV学习笔记（四）：关于鼠标的相关事件函数...
(7)把鼠标当画笔本篇目标: 学会使用OpenCV中的鼠标处理的相关事件,事件回调函数怎么去定义,参数有哪些,以及如何注册鼠标监听事件. 7.1 .1 回调函数的定义: 1 def name(eve ...
html表格宽度拖拽,Js拖拽实现改变Table的列宽解决方案
Js拖拽实现改变Table的列宽如题,楼主是Js小白,最近遇到问题,需要用Js实现GridView的列拖拽改变大小,在网上找到一段代码如下: function MouseDownToResize(o ...
Unity鼠标拖动物体、按下鼠标左键旋转观察物体、鼠标滚轮缩放视野
如题目所示,本文实现这三个效果.所有代码都在pc端成功运行,移植到手机端改变相应的判断条件即可,核心算法没有问题. 一. 鼠标拖拽移动物体效果演示源代码 public class mousedra ...
解决Win8.1键盘输入后鼠标左键响应延迟的问题
本人安装Windows8.1后发现一个细节问题,每次敲击键盘上的字母或数字.空格键后,在大约零点几秒内鼠标左键是没有响应的. 只有按数字.字母或空格等输入字符的按键后才会出现这种情况,按Ctrl或Al ...
点击鼠标左键自动锁定计算机图标,鼠标一按左键桌面图标就消失了怎么办_为什么按鼠标左键时桌面图标都不见了...
最近有不少用户反馈说碰到这样一个奇怪的现象,就是鼠标只要在桌面一按左键,左面上的图标就会消失了,而且点击鼠标也没有什么用,那么为什么按鼠标左键时桌面图标都不见了呢?原因有很多,可能是系统故障或者中毒等 ...
zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法
转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: z ...

vue2 实现鼠标左键拖拽实现框选功能

vue2 实现鼠标左键拖拽实现框选功能相关推荐

最新文章

热门文章