JavaScript拖动效果

来源：互联网发布：安知玉如意结局解析编辑：程序博客网时间：2024/05/23 16:05

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>

这里写图片描述

0 0