最近做了一个用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

$(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;

}

});