DOMRect 矩形对象
对象特点
DOMRect 代表一个矩形对象，继承父类 DOMRectReadOnly，属性与父类相同，区别在于 DOMRect 可读写
构造函数
DOMRect()，创建一个新的 DOMRect 对象
var myDOMRect = new DOMRect(x, y, width, height); //创建一个矩形对象
// x --> DOMRect 原点的 x 坐标
// y --> DOMRect 原点的 y 坐标
// width --> DOMRect 的宽度
// height --> DOMRect 的高度
let newRect = new DOMRect(20,20,100,100);
console.log(newRect)
/**DOMRect {x: 20, y: 20, width: 100, height: 100, top: 20, …}
* bottom: 120
* height: 100
* left: 20
* right: 120
* top: 20
* width: 100
* x: 20
* y: 20
* __proto__: DOMRect
*/
对象属性
继承父类 DOMRectReadOnly，属性与父类相同，区别在于 DOMRect 可读写
let newRect = new DOMRect(20,20,100,100);
console.log(newRect)
/**DOMRect {x: 20, y: 20, width: 100, height: 100, top: 20, …}
* bottom: 120
* height: 100
* left: 20
* right: 120
* top: 20
* width: 100
* x: 20
* y: 20
* __proto__: DOMRect
*/
//属性一：获取矩形原点坐标
console.log(newRect.x,newRect.y); //20 20
//属性二：获取宽高
console.log(newRect.width,newRect.height); //100 100
//属性三：获取各边界坐标值
console.log(`顶坐标：${newRect.top}`); // 20 --> 与y同，或y+height(height为负值)
console.log(`底坐标：${newRect.bottom}`); // 120--> 与y+height同，或y(height为负值)
console.log(`左坐标：${newRect.left}`); // 20 --> 与x同，或x+width(width为负值)
console.log(`右坐标：${newRect.right}`); // 120 --> 与x+width同，或x(width为负值)
静态方法
DOMRectReadOnly.fromRect()，创建一个具有指定位置和尺寸的新DOMRect对象。
//方法语法
fromRect()
fromRect(rectangle)
//rectangle --> DOMRect 对象：An object specifying the location and dimensions of a rectangle. All properties default to 0.
Element.getClientRects() 方法
功能语法
-
功能：返回一个指向客户端中每一个盒子的边界矩形的矩形集合
-
语法：
let rectCollection = ELement.getClientRects();
返回值
-
返回值是 ClientRect 对象集合，该对象是与该元素相关的 CSS 边框
-
每个 ClientRect 对象包含一组描述该边框的只读属性——left、top、right 和 bottom，单位为像素，这些属性值是相对于视口的 top-left（左上角）
Element.getBoundingClientRect() 方法
功能语法
-
功能：Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。
-
语法：
let rectObj = ELement.getBoundingClientRect();
返回值
-
返回值是一个 DOMRect 对象，是包含整个元素的最小矩形（包括 padding 和 border-width）。
-
该对象使用 left、top、right、bottom、x、y、width 和 height 只读属性描述整个矩形的位置和大小，像素为单位。除了 width 和 height 以外的属性是相对于视图窗口的左上角 来计算的。
实例 - 鼠标在限定区域范围内拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.square{
width: 500px;
height: 500px;
margin: auto;
background-color: lightgray;
position: relative;
}
.box{
width: 150px;
height: 150px;
background-color: violet;
position: absolute;
pointer-events: none; /* 点击事件穿透拖拽 */
}
.box2{
width: 10px;
height: 100px;
}
</style>
</head>
<body>
<div id="square" class="square">
<div id="box" class="box"></div>
</div>
</body>
<script>
let boxSquare = document.getElementById("square");
let boxDrag = document.getElementById("box");
/**补充：Element.getClientRects() 和 Element.getBoundingClientRect
* 功能：
* Element.getClientRects() 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合
* Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置
*/
let boxSqaureRect = boxSquare.getBoundingClientRect();
let boxSquareHeight = boxSqaureRect.bottom - boxSqaureRect.top;
let boxSquareWidth = boxSqaureRect.right - boxSqaureRect.left;
//在拖拽目标元素区域内，鼠标按下，中心自动对准目标
boxSquare.addEventListener("mousedown",function(evt){
boxDrag.style.left = (evt.offsetX - Number.parseInt(getComputedStyle(boxDrag).width)/2) + "px";
boxDrag.style.top = (evt.offsetY - Number.parseInt(getComputedStyle(boxDrag).height)/2) + "px";
//鼠标按下不松开，执行拖拽，不超过父元素边框
boxSquare.addEventListener("mousemove",moveDrag)
})
/**通过方法addEventListener() 注册的事件，无法通过赋值null解绑，
* 因此，需要使用removeEventListener() 方式，移除事件，
* 从而需要将事件处理函数，独立分装出来或者使用声明式函数
*/
function moveDrag(evt){
//拖动
boxDrag.style.left = evt.offsetX - Number.parseInt(getComputedStyle(boxDrag).width)/2 + "px";
boxDrag.style.top = evt.offsetY - Number.parseInt(getComputedStyle(boxDrag).height)/2 + "px";
//限制左右
if (boxSquareWidth <= Number.parseInt(getComputedStyle(boxDrag).width)/2 + evt.offsetX) {
boxDrag.style.left = boxSquareWidth - Number.parseInt(getComputedStyle(boxDrag).width) + "px";
} else if(evt.offsetX <= Number.parseInt(getComputedStyle(boxDrag).width)/2) {
boxDrag.style.left = 0;
} //else none
//限制上下
if (boxSquareHeight <= Number.parseInt(getComputedStyle(boxDrag).height)/2 + evt.offsetY) {
boxDrag.style.top = boxSquareHeight - Number.parseInt(getComputedStyle(boxDrag).height) + "px";
} else if(evt.offsetY <= Number.parseInt(getComputedStyle(boxDrag).height)/2) {
boxDrag.style.top = 0;
} //else none
}
//鼠标松开，结束拖拽，目标元素原地不动
boxSquare.addEventListener("mouseup",function(evt){
boxSquare.removeEventListener("mousemove", moveDrag);
})
</script>
</html>
