JavaScript拖动效果

最新推荐文章于 2024-02-17 09:28:20 发布

西红柿炒番茄AB

最新推荐文章于 2024-02-17 09:28:20 发布

阅读量316

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/a_sid/article/details/53438037

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #did {
                width: 200px;
                height: 200px;
                background-color: green;
                position: absolute;
            }
        </style>
    </head>

    <body>
        <h2>拖动效果</h2>
        <div id="did"></div>

        <script type="text/javascript">
            //通过id获取div
            var did = document.getElementById("did");
            //给div绑定事件
            //当鼠标在div上面按下的时候会出现这个效果
            did.onmousedown = function(ent) {
                var event = ent || window.event;
                //将div的颜色变成是红色
                did.style.backgroundColor = "red";
                var x = event.clientX - this.offsetLeft;
                var y= event.clientY - this.offsetTop;


                    //当鼠标在div上面移动的时候
            window.document.onmousemove = function(en) {
                var ent = en || window.event;
                //设置div的位置
                did.style.left = ent.clientX - x + "px";
                did.style.top = ent.clientY - y + "px";
            }
            }
            //当鼠标抬起的时候
            did.onmouseup = function() {
                did.style.backgroundColor = "green";
                //将鼠标在div上面的移动事件清空
                window.document.onmousemove = null;
            }
        </script>
    </body>

</html>

这里写图片描述

西红柿炒番茄AB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript拖动效果

<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #did { width: 200px; height: 200px;
复制链接

扫一扫

专栏目录