js计算距离最近的元素坐标

实现思路

根据两元素的坐标形成直角三角形的两个直角边，再有两个直角边得出斜边，斜边就是两个坐标点的距离。

核心函数

Math.abs():计算绝对值
Math.sqrt():计算平方根

                //a，b为直角三角形的两个直角边
                a = Math.abs(x - targetOffset[0])
                b = Math.abs(y - targetOffset[1])
                //c为直角三角形的斜边
                c = Math.sqrt(a * a + b * b) as 0

实现方法

//计算计算离目标为位置最近元素的坐标
//parentDom:元素外层容器 / 父元素 targetOffset目标元素坐标[x,y]
const computedDistance = (parentDom: Element, targetOffset: Array<number>) => {
    let min = -1
    let orgPath: Array<number> = []
    let a, b, c
    if (parentDom.childNodes.length > 3)
    //只计算类名为 dom_item 的元素
        parentDom.childNodes.forEach((e: any) => {
            if (e.getAttribute('class') === 'dom_item') { 
                let { x, y, width, height } = e.getBoundingClientRect()
                //a，b为直角三角形的两个直角边
                a = Math.abs(x - targetOffset[0])
                b = Math.abs(y - targetOffset[1])
                //c为直角三角形的斜边
                c = Math.sqrt(a * a + b * b) as 0
                c = Number(c.toFixed(0)) as 0
                if (c !== 0 && (min === - 1 || c < min)) {
                    //min为元素中离目标元素最近元素的距离
                    min = c
                    //最近的元素的坐标
                    orgPath = [Number((x + (width / 2)).toFixed(0)), Number((y + (height / 2)).toFixed(0))]
                }
            }
        })
    //距离最近元素的坐标
    return orgPath
}