js实现鼠标拖拽多选功能示例
程序员文章站
2022-05-14 19:16:44
最近做了一个用js实现鼠标拖拽多选的功能，于是整理了一下思路，写了一个小demo：
遮罩出现：
被遮罩盖住的，即为选中的块（背景色为粉色）
下面是具体代码...
最近做了一个用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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 老生常谈js数据类型