var evt = window.event||arguments[0]; //加上滚动距离 var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var startX =evt.pageX || evt.clientX + scrollX; var startY =evt.pageY || evt.clientY + scrollY;
判断可选框坐标范围
//判断鼠标点击的点是否在可选框内部，主要是判断第一个可选框的左上角坐标和最后一个圈选框的右下角坐标 if ((startX >= firstDivOffsetLeft && startY >= firstDivOffsetTop) && (startX <= lastDivOffsetLeft && startY <= lastDivOffsetTop))
判断鼠标点击在哪一个单元格里面,并获取该单元格左上角坐标
//判断鼠标点击的点在哪一个div里面，然后更改圈选框的左上角坐标为该div的左上角坐标 for (var i = 0; i < fileNodes.length; i++) { if ((startX >= 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:1px dashed #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 (var i = 0; i < selList.length; i++) { var sl = selList[i].offsetWidth + getOffsetLeft(selList[i]); var st = selList[i].offsetHeight + getOffsetTop(selList[i]); if (sl > _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"]; } } }
其他工具方法
const getOffsetLeft = function (obj) { var tmp = obj.offsetLeft; var node = obj.offsetParent; while (node != null) { tmp += node.offsetLeft; node = node.offsetParent; } return tmp; } const getOffsetTop = function (obj) { var tmp = obj.offsetTop; var node = obj.offsetParent; while (node != null) { tmp += node.offsetTop; node = node.offsetParent; } return tmp; }
总结
以上所述是小编给大家介绍的ant design实现圈选功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: