获取可选单元格数组
//可选单元格
varfileNodes=document.getElementsByName("chooseDiv");
获取鼠标点击位置的坐标
varevt=window.event||arguments[0];
//加上滚动距离
varscrollX=document.documentElement.scrollLeft||document.body.scrollLeft;
varscrollY=document.documentElement.scrollTop||document.body.scrollTop;
varstartX=evt.pageX||evt.clientX+scrollX;
varstartY=evt.pageY||evt.clientY+scrollY;
判断可选框坐标范围
//判断鼠标点击的点是否在可选框内部,主要是判断第一个可选框的左上角坐标和最后一个圈选框的右下角坐标
if((startX>=firstDivOffsetLeft&&startY>=firstDivOffsetTop)&&(startX<=lastDivOffsetLeft&&startY<=lastDivOffsetTop))
判断鼠标点击在哪一个单元格里面,并获取该单元格左上角坐标
//判断鼠标点击的点在哪一个div里面,然后更改圈选框的左上角坐标为该div的左上角坐标
for(vari=0;i=getOffsetLeft(fileNodes[i])&&startX<=getOffsetLeft(fileNodes[i])+fileNodes[i].offsetWidth)&&(startY>=getOffsetTop(fileNodes[i])&&startY<=getOffsetTop(fileNodes[i])+fileNodes[i].offsetHeight)){
console.log("在内部");
startX=getOffsetLeft(fileNodes[i]);
startY=getOffsetTop(fileNodes[i]);
break;
}else{
console.log("不在内部");
}
}
创建圈选框,并更改圈选框的左上角坐标为该单元格的左上角坐标
//创建选择框
selDiv=document.createElement("div");
selDiv.style.cssText="position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1pxdashed#0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
selDiv.id="selectDiv";
document.body.appendChild(selDiv);
selDiv.style.left=startX+"px";
selDiv.style.top=startY+"px";
鼠标移动过程中,改变圈选框的宽高;
evt=window.event||arguments[0];
if(isSelect){
if(selDiv.style.display=="none"){
selDiv.style.display="";
}
//加上鼠标滚动距离
var_scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;
var_scrollY=document.documentElement.scrollTop||document.body.scrollTop;
_x=evt.pageX||evt.clientX+_scrollX;
_y=evt.pageY||evt.clientY+_scrollY;
selDiv.style.left=Math.min(_x,startX)+"px";
selDiv.style.top=Math.min(_y,startY)+"px";
selDiv.style.width=Math.abs(_x-startX)+"px";
selDiv.style.height=Math.abs(_y-startY)+"px";
鼠标抬起的时候,计算被圈选的单元格并更改样式;
var_l=selDiv.offsetLeft,_t=selDiv.offsetTop;
var_w=selDiv.offsetWidth,_h=selDiv.offsetHeight;
for(vari=0;i_l&&st>_t&&getOffsetLeft(selList[i])<_l+_w&&getOffsetTop(selList[i])<_t+_h){
if(selList[i].className.indexOf("seled")==-1){
selList[i].className=styles["columns-borderseled"];
}
else{
selList[i].className=styles["columns-border"];
}
}
}
其他工具方法
constgetOffsetLeft=function(obj){
vartmp=obj.offsetLeft;
varnode=obj.offsetParent;
while(node!=null){
tmp+=node.offsetLeft;
node=node.offsetParent;
}
returntmp;
}
constgetOffsetTop=function(obj){
vartmp=obj.offsetTop;
varnode=obj.offsetParent;
while(node!=null){
tmp+=node.offsetTop;
node=node.offsetParent;
}
returntmp;
}
总结
以上所述是小编给大家介绍的antdesign实现圈选功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。