js实现鼠标拖拽多选功能

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:
遮罩出现:

被遮罩盖住的,即为选中的块(背景色为粉色)

下面是具体代码,注释已在文中,与大家交流。

<!DOCTYPE html>
<html>
<head>
    <title>鼠标拖拽多选功能</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        *{
            box-sizing:border-box;
        }
        ul{
            width:500px;
            height:auto;
            margin:0;
            padding:20px;
            font-size: 0;
            /*需设置定位*/
            position:relative;
        }
        li{
            width:70px;
            height:70px;
            margin:10px;
            padding:0;
            display:inline-block;
            vertical-align: top;
            font-size: 13px;
            border:1px solid #d9d9d9;
        }
        #moveSelected{
            position:absolute;
            background-color: blue;
            opacity:0.3;
            border:1px dashed #d9d9d9;
            top:0;
            left:0;
        }
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <!-- 鼠标拖拽出的遮罩 (定位为  position:absolute)-->
        <!-- 遮罩最好是在绑定了mouseover事件的元素内部,并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面,依然可以利用冒泡执行父元素的mouseover事件,就不会出现遮罩只能扩大,不能缩小的情况了(亲自试过) -->
        <div id="moveSelected"></div>
    </ul>
</body>
</html>
<script type="text/javascript">
    $(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<oldLeft){//向左拖
                moveSelected.style.left=event.pageX+‘px‘;
                moveSelected.style.width=(oldLeft-event.pageX)+‘px‘;
            }else{
                moveSelected.style.width=(event.pageX-oldLeft)+‘px‘;
            }
            if(event.pageY<oldTop){//向上
                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<blockList.length;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;
        }
    });
</script>

原文地址:https://www.cnblogs.com/10yearsmanong/p/12217610.html

时间: 2024-10-19 20:36:05

js实现鼠标拖拽多选功能的相关文章

鼠标拖拽多选功能

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"&

js实现鼠标拖拽div-------Day44

如果去问这样一个问题"你觉得鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘按钮那么多,如果手小了或者手法不规范了,太容易出问题了,也对操作的速度和有效性是大大的降低了,当然不可否认,会有那么一批人,操作起键盘来完全可以忽略鼠标的,但这些都应该是骨灰级别的了吧,起码我现在的层次还接触不到,只能向往. 然而,当面对这么一个问题时,我突然有点纠结,因为毕竟以前我也是那么想的,但是这次开发让我是大跌眼镜,键盘操作我在开发中,我只能判定其按键是否按键,然后根据不同按键进

JS Event 鼠标拖拽事件

<!DOCTYPE html><html> <head>        <meta charset="UTF-8">        <title>JS Event鼠标拖拽事件</title>                <style>            #box{width:200px;height:200px;background:#000;position:absolute;}       

JS实现鼠标拖拽效果以及放大缩小

要求:拖拽的子元素不能走出父元素,大小不能超过父元素,放大/缩小时阻止冒泡事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin: 0;padding: 0;} .box1{border: 10px solid #000;width: 400px;height: 400px;posi

JS原生---鼠标拖拽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      &l

js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特点: ? 封装 : 看不到里面的东西 , 用好表面功能. ? 继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性. ? 多态 ? 抽象 : 抽取一个功能里面多个核心的功能模块. ? 思想: 高内聚.低耦合 ? 低耦合 :每个功能模块之间耦合度要低 ? 高内聚 :模块内部要紧密相连 面向

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

鼠标拖拽移动Java界面组件

默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖拽移动窗口的目的呢?最开始,我简单的在mouseDragged方法里frame.setLocation(e.getX(), e.getY()),结果,frame拖拽的时候不停地闪烁,位置在屏幕上不断跳动.后来网上查资料,找到了答案. 这里给一个简单的示例,一看就明白: 1 package com.j

jquery鼠标拖拽效果分享

//html代码部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/jquery-1.11.1.js"></script> </head> <style> body