JavaScript拖动效果

最新推荐文章于 2024-07-21 13:38:37 发布

原创最新推荐文章于 2024-07-21 13:38:37 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个简单的拖拽效果实现方案，使用HTML、CSS和JavaScript创建一个可以被鼠标拖动的div元素。首先定义div的基本样式并设置其为绝对定位，然后通过onmousedown、onmousemove和onmouseup事件监听来实现拖拽功能。

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>