javascript 拖动实例

HolyCode_

于 2014-10-10 23:52:20 发布

阅读量610

点赞数

CC 4.0 BY-SA版权

文章标签： javascript function javascript引擎 html dom

本文链接：https://blog.youkuaiyun.com/Primary_wind/article/details/39974261

本文介绍了一种利用JavaScript实现网页元素拖拽的方法，通过事件监听和DOM操作，可以实现在页面上自由拖动指定元素的功能。该方法利用DOM0级事件，通过事件冒泡实现了元素位置的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
    <head>
    </head>
    <body>
        <div id="myDiv" style="position:absolute;background:red;width:500px;height:500px;">abc</div>
        <script type="text/javascript">
            var mydiv = null;
            var offleft = 0;
            var offTop = 0;
            document.onmousedown = function(event){
                mydiv = document.getElementById("myDiv");
                offleft = event.clientX - mydiv.offsetLeft;
                offTop = event.clientY - mydiv.offsetTop;
            }
            document.onmousemove = function(event){
                if(mydiv !=null){
                    console.log(event.clientX,event.clientY);
                    mydiv.style.left = event.clientX - offleft + "px";
                    mydiv.style.top = event.clientY - offTop + "px";
                }
            }
            document.onmouseup = function(event){
                offleft = 0;
                offright = 0;
                mydiv = null;
            }
        </script>
    </body>
</html>

利用了事件冒泡，已经DOM0事件触发。