最近做了一個用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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
