HTML手写拖拽功能

Goat恶霸詹姆斯

已于 2023-12-05 00:04:11 修改

阅读量146

点赞数

分类专栏：我的笔记文章标签： html javascript css

于 2023-05-14 16:43:26 首次发布

本文链接：https://blog.csdn.net/m0_59962790/article/details/130670517

版权

我的笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

该代码示例展示了如何使用JavaScript实现一个简单的HTML元素拖拽功能。通过计算鼠标坐标与元素初始位置的偏移量，动态更新元素的top和left属性，允许用户在页面上拖动一个粉色的方块。代码还包含了对IE浏览器的兼容处理。

摘要由CSDN通过智能技术生成

原理主要还是通过鼠标坐标位置的计算偏移量，然后赋值给拖拽的元素的top和left属性，话不多说了，直接上代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #drag {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        top: 0;
        left: 0;
    }

    html {
        height: 100%;
        overflow: hidden;
    }
</style>

<body>
    <div id="drag">

    </div>
</body>
<script type="text/javascript">
    let dragStart = { x: 0, y: 0 }
    let mouseStart = { x: 0, y: 0 }

    drag.onmousedown = function (e) {
        //获取当前鼠标按下时拖拽的起始坐标
        dragStart.x = this.offsetLeft
        dragStart.y = this.offsetTop
        //获取鼠标按下时的坐标
        mouseStart.x = e.clientX
        mouseStart.y = e.clientY
        if (drag.setCapture) { //ie浏览器全局捕捉
            drag.setCapture()
        }
        document.onmousemove = function (e) {
            //鼠标移动时事件
            let mousemove = { x: e.clientX, y: e.clientY } //获取实时鼠标的坐标
            let L = mousemove.x - mouseStart.x + dragStart.x//获取距离浏览器左边的距离，鼠标的x偏移量加上初始的x的值
            let T = mousemove.y - mouseStart.y + dragStart.y//获取距离浏览器上边的距离，鼠标的y偏移量加上初始的y的值
            //如果左边距<20那么直接为0
            if (L < 20) {
                L = 0
            } else if (L > (document.documentElement.clientWidth - drag.offsetWidth - 20)) {//如果L超出右边界，那么就等于屏幕可以拖拽的最大值
                L = document.documentElement.clientWidth - drag.offsetWidth
            }
            if (T < 20) {
                T = 0
            } else if (T > (document.documentElement.clientHeight - drag.offsetHeight - 20)) {
                T = document.documentElement.clientHeight - drag.offsetHeight
            }
            //最后赋值给到拖拽的元素
            drag.style.left = L + "px"
            drag.style.top = T + "px"
        }
        document.onmouseup = function (e) { //鼠标抬起的瞬间，清除移动时的方法
            document.onmousemove = document.onmouseup = null
            if (document.releaseCapture) {
                //ie浏览器全局释放捕捉
                document.releaseCapture()

            }
            // 阻止事件的冒泡
            return false
        }
    }
</script>

</html>