js 实现拖拽效果

最新推荐文章于 2024-07-10 14:36:18 发布

husterxsp

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量578

点赞数

分类专栏： javascript 文章标签： javascript 拖拽

本文链接：https://blog.csdn.net/xsp_Login/article/details/46495049

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js onmousedown，onmousemove，onmouseup实现简单的拖拽：

<!docType html>
<html>
<head>
<style type="text/css">
    #drag {
        position: relative; /*必须设置position*/
        width: 100px;
        height: 100px;
        background-color: #ABC;
    }
</style>
</head>
<body>
    <div id="drag"></div>
    <script>
        var drag = document.getElementById('drag');
        drag.onmousedown = dragHandle;
        function dragHandle(e) {
            var deltaX = e.clientX - drag.offsetLeft;
            var deltaY = e.clientY - drag.offsetTop;
            document.onmousemove = moveHandle;
            document.onmouseup = upHandle;
            function moveHandle(e) {
                drag.style.left = (e.clientX - deltaX) + "px";
                drag.style.top = (e.clientY - deltaY) + "px";
            }
            function upHandle() {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    </script>
</body>
</html>