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

时间：2021-05-26

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章