js实现拖拽移动元素：mousedown\mousemove\mouseup

元元元缘

已于 2022-08-31 16:35:09 修改

阅读量627

点赞数

文章标签： javascript 前端 css3

于 2022-08-31 16:31:41 首次发布

本文链接：https://blog.csdn.net/m0_64547652/article/details/126626767

版权

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #temp {
        width: 500px;
        height: 500px;
        margin: 5% 5%;
        background: #f1d37e;
        position: relative
    }

    #tempMove {
        width: 70px;
        height: 70px;
        background: black;
        position: absolute;

    }
</style>

<body>
    <div id="temp">
        <div id="tempMove" style="left : 0 ; top : 0"></div>
    </div>
</body>

<script>
    const tempMove = document.getElementById("tempMove")
    const temp = document.getElementById("temp")

    function down(e) {
        let offsetX = parseInt(tempMove.style.left)
        let offsetY = parseInt(tempMove.style.top)

        let innerX = e.clientX - offsetX
        let innerY = e.clientY - offsetY

        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', up)
        function move(e) {
            tempMove.style.left = e.clientX - innerX + 'px'
            tempMove.style.top = e.clientY - innerY + 'px'

            if (parseInt(tempMove.style.left) <= 0) {
                tempMove.style.left = '0px'
            }
            if (parseInt(tempMove.style.top) <= 0) {
                tempMove.style.top = '0px'
            }

            if (parseInt(tempMove.style.left) >= temp.offsetWidth - tempMove.offsetWidth) {
                tempMove.style.left = temp.offsetWidth - tempMove.offsetWidth + 'px'
            }
            if (parseInt(tempMove.style.top) >= temp.offsetHeight - tempMove.offsetHeight) {
                tempMove.style.top = temp.offsetHeight - tempMove.offsetHeight + 'px'
            }
        }

        function up() {
            document.removeEventListener('mousemove', move)
            document.removeEventListener('mouseup', up)
        }
    }

    tempMove.addEventListener("mousedown", down)
</script>