js拖动div

js拖动div

• css部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .layer{
            width: 150px;
            height: 150px;
            background-color: red;
            cursor: move;
            position: absolute;
        }
    </style>
<div class="layer">你好</div>

• js部分

<script>
        let layer = document.querySelector('.layer');
        let canMove = false
        let x = 0, y = 0 ;
        let maxLeft = window.innerWidth - layer.offsetWidth
        let maxTop = window.innerHeight - layer.offsetHeight

        layer.onmousedown = function(e){
            canMove = true
            x = e.pageX - layer.offsetLeft 
            y = e.pageY - layer.offsetTop 
        }

        window.onmousemove = function(e){
            e.preventDefault();

            if (canMove) {
                let left = e.pageX - x
                let top = e.pageY - y

                if (left < 0) left = 0
                if (top < 0) top = 0
                if (left > maxLeft) left = maxLeft
                if (top > maxTop) top = maxTop
                layer.style.left = left + 'px'
                layer.style.top = top + 'px'
            }
        }

        window.onblur = ()=>{
            canMove = falseS
        }
        window.onmouseup = function(){
            canMove = false
        }

     </script>