js实现鼠标拖拽多选功能示例

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

遮罩出现：

被遮罩盖住的，即为选中的块（背景色为粉色）

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

  
  
  
    *{
      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;
    }
  


  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20
    
21
    
22
    
    
    
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。