原生JS 保存记录的拖拽（高手勿喷）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        div {
            width: 100px;
            height: 100px;
            position: absolute;
            background: skyblue;
        }
    </style>
</head>
<body>
        <div></div>
</body>
<script>
    // 获取元素
var div=document.querySelector('div')
// 盒子点击时
div.onmousedown=function(e){
    var dx=e.pageX-div.offsetLeft
    var dy=e.pageY-div.offsetTop
    document.onmousemove=function(e){
        var x=e.pageX-dx;
        var y=e.pageY-dy;
        div.style.left=x+'px'
        div.style.top=y+'px'
        //  本地存储
        localStorage.getItem("x",x)
        localStorage.getItem("y",y)
        // 鼠标失去光标时不移动
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
}
onload=()=>{
    div.style.left=localStorage.getItem("x")+'px'
    div.style.top=localStorage.getItem("y")+'px'
}


</script>
</html>
原生JS 保存记录的拖拽（高手勿喷）

猜你喜欢
