摘要:最近做了一个用实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小遮罩出现被遮罩盖住的,即为选中的块背景色为粉色下面是具体代码,注释已在文中,与大家交流。
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:
遮罩出现:
被遮罩盖住的,即为选中的块(背景色为粉色)
下面是具体代码,注释已在文中,与大家交流。
鼠标拖拽多选功能
-
- 1
-
- 2
-
- 3
-
- 4
-
- 5
-
- 6
-
- 7
-
- 8
-
- 9
-
- 10
-
- 11
-
- 12
-
- 13
-
- 14
-
- 15
-
- 16
-
- 17
-
- 18
-
- 19
-
- 20
-
- 21
-
- 22
-
-
-
-
- $(document).ready(function(){
- let moveSelected=$("#moveSelected")[0];
- let flag=false;//是搜开启拖拽的标志
- let oldLeft=0;//鼠标按下时的left,top
- let oldTop=0;
- let selectedList=[];//拖拽多选选中的块集合
- // 鼠标按下时开启拖拽多选,将遮罩定位并展现
- $(".list").mousedown(function(event) {
- flag=true;
- moveSelected.style.top=event.pageY+"px";
- moveSelected.style.left=event.pageX+"px";
- oldLeft=event.pageX;
- oldTop=event.pageY;
- event.preventDefault(); // 阻止默认行为
- event.stopPropagation(); // 阻止事件冒泡
- });
- // 鼠标移动时计算遮罩的位置,宽 高
- $(".list").mousemove(function(event) {
- if(!flag) return;//只有开启了拖拽,才进行mouseover操作
- if(event.pageX
- moveSelected.style.left=event.pageX+"px";
- moveSelected.style.width=(oldLeft-event.pageX)+"px";
- }else{
- moveSelected.style.width=(event.pageX-oldLeft)+"px";
- }
- if(event.pageY
- moveSelected.style.top=event.pageY+"px";
- moveSelected.style.height=(oldTop-event.pageY)+"px";
- }else{
- moveSelected.style.height=(event.pageY-oldTop)+"px";
- }
- event.preventDefault(); // 阻止默认行为
- event.stopPropagation(); // 阻止事件冒泡
- });
- //鼠标抬起时计算遮罩的right 和 bottom,找出遮罩覆盖的块,关闭拖拽选中开关,清除遮罩数据
- $(".list").mouseup(function(event) {
- moveSelected.style.bottom=Number(moveSelected.style.top.split("px")[0])+Number(moveSelected.style.height.split("px")[0]) + "px";
- moveSelected.style.right=Number(moveSelected.style.left.split("px")[0])+Number(moveSelected.style.width.split("px")[0])+"px";
- findSelected();
- flag=false;
- clearDragData();
- event.preventDefault(); // 阻止默认行为
- event.stopPropagation(); // 阻止事件冒泡
- });
- $(".list").mouseleave(function(event) {
- flag=false;
- moveSelected.style.width=0;
- moveSelected.style.height=0;
- moveSelected.style.top=0;
- moveSelected.style.left=0;
- event.preventDefault(); // 阻止默认行为
- event.stopPropagation(); // 阻止事件冒泡
- });
- function findSelected(){
- let blockList=$(".list").find("li");
- for(let i=0;i
- //计算每个块的定位信息
- let left=$(blockList[i]).offset().left;
- let right=$(blockList[i]).width()+left;
- let top=$(blockList[i]).offset().top;
- let bottom=$(blockList[i]).height()+top;
- //判断每个块是否被遮罩盖住(即选中)
- let leftFlag=moveSelected.style.left.split("px")[0]<=left && left<=moveSelected.style.right.split("px")[0];
- let rightFlag=moveSelected.style.left.split("px")[0]<=right && right<=moveSelected.style.right.split("px")[0];
- let topFlag=moveSelected.style.top.split("px")[0]<=top && top<=moveSelected.style.bottom.split("px")[0];
- let bottomFlag=moveSelected.style.top.split("px")[0]<=bottom && bottom<=moveSelected.style.bottom.split("px")[0];
- if((leftFlag || rightFlag) && (topFlag || bottomFlag)){
- selectedList.push(blockList[i]);
- $(blockList[i]).addClass("selected");
- }
- }
- console.log(selectedList);
- }
- function clearDragData(){
- moveSelected.style.width=0;
- moveSelected.style.height=0;
- moveSelected.style.top=0;
- moveSelected.style.left=0;
- moveSelected.style.bottom=0;
- moveSelected.style.right=0;
- }
- });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84524.html
摘要:最近做了一个用实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小遮罩出现被遮罩盖住的,即为选中的块背景色为粉色下面是具体代码,注释已在文中,与大家交流。 最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:遮罩出现:showImg(https://segmentfault.com/img/bVRVC2?w=564&h=516);被遮罩盖住的,即为选中的...
摘要:最近做了一个用实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小遮罩出现被遮罩盖住的,即为选中的块背景色为粉色下面是具体代码,注释已在文中,与大家交流。 最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:遮罩出现:showImg(https://segmentfault.com/img/bVRVC2?w=564&h=516);被遮罩盖住的,即为选中的...
摘要:鼠标按下拖拽多选单元格这个是本唯一的亮点了个人认为。这样做的结果是页面非常卡,因为鼠标移动过程会多次触发鼠标移动事件,会多次进行单元格元素循环遍历。 网页版模仿Excel 最近公司闲的dan疼,非要模仿Excel做一个网页版的Excel,刚开始听说要做这么一个东西的时候瞬间觉得公司领导高(sang)瞻(xin)远(bing)瞩(kuang),只能头铁的接下了,那就开始干。其实主要目的是...
摘要:鼠标按下拖拽多选单元格这个是本唯一的亮点了个人认为。这样做的结果是页面非常卡,因为鼠标移动过程会多次触发鼠标移动事件,会多次进行单元格元素循环遍历。 网页版模仿Excel 最近公司闲的dan疼,非要模仿Excel做一个网页版的Excel,刚开始听说要做这么一个东西的时候瞬间觉得公司领导高(sang)瞻(xin)远(bing)瞩(kuang),只能头铁的接下了,那就开始干。其实主要目的是...
阅读 3772·2021-09-07 09:59
阅读 787·2019-08-29 15:12
阅读 870·2019-08-29 11:14
阅读 1374·2019-08-26 13:27
阅读 2758·2019-08-26 10:38
阅读 3211·2019-08-23 18:07
阅读 1341·2019-08-23 14:40
阅读 1990·2019-08-23 12:38