面向对象 - 重构拖拽 及 案例

重构拖拽 及 案例

html结构

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

css样式

    #box{
    	width: 100px;
        height: 100px;
        background-color: bisque;
        border-radius: 50%;
        position: absolute;  
	}

js代码

	{
		let box = document.querySelector("#box");
			// 定义为全局变量：每次点下鼠，标获取鼠标和元素位置
            let starMouse = {};
            let startEl = {};
            
            // 获取或设置  元素移动的值
            // 两个参数时 获取元素的样式
            // 三个参数时 设置元素的样式
            function css(el,attr,val){
                //获取元素的值
                if(val === undefined){
                    // getComputedStyle(el): 会返回指定元素的所有style,  
                    // 返回值是对象类型
                    return parseFloat(getComputedStyle(el)[attr]);
                    // parseFloat 转化为 浮点数（小数）
                }
                //设置元素的值
                el.style[attr] = val + "px";
            }
            
			// 抽取事件监听中的执行函数绑定变量名
            // 方便在 取消事件监听时调用指定函数
			let move = (e)=>{
				// 获取新的鼠标位置
				let newMouse = {
                    x:e.clientX,
                    y:e.clientY
                }
                // 鼠标移动的距离
                let disMouse = {
                    x: newMouse.x - starMouse.x,
                    y: newMouse.y - starMouse.y
                }
                // 赋新值给元素
                css(box,"left",startEl.x + disMouse.x);
                css(box,"top",startEl.y + disMouse.y);
            }
			
			// 按下事件 - 添加事件监听
            box.addEventListener("mousedown",(e)=>{
                // 鼠标每次按下的时候，只是重新赋值，而不是重新申请空间
               
               // 获取鼠标位置
                starMouse = {
                     x: e.clientX,
                     y: e.clientY
                }
                // 获取元素位置
                startEl = {
                    x: css(box,"left"),
                    y: css(box,"top")
                }
                // 移动事件
                document.addEventListener("mousemove",move);
				// 抬起事件 - 取消事件监听
                document.addEventListener("mouseup",()=>{
                    document.removeEventListener("mousemove",move);
                });

            });

        }