PC端-元素边界吸附&触碰交互

知识点1：全局捕获：box.setCapture && box.setCapture();（低级浏览器）

​ 释放全局捕获：box.releaseCapture && box.releaseCapture();低级浏览器）

知识点2：禁止浏览器默认行为：return false；（高级浏览器）

知识点3：计算元素到视口上方和左边的距离：getBoundingClientRect();

html代码：

 <div id="box"></div>
 <div id="long"></div>

css代码：

<style>
        * {
   
            padding: 0;
            margin: 0;
        }
        
        #box {
   
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: hotpink;
        }
        
        #long {
   
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%