实现了拖拽和状态栏-慕课网

首页课程实战体系课手记专栏慕课教程

实现了拖拽和状态栏

来源：4-3 [DOM事件] QQ面板状态切换效果

大布and科比

2015-08-22 18:43

<!doctype html>

<html>

<head>

<style>

*{margin:0;padding:0;}

#zhu{background-color:#f3f3f3;border:1px solid #dddddd;position:absolute;left:400px;top:400px;padding:30px 130px;border-radius:15px;box-shadow:0 0 20px #444444;}

#logo{margin:0 auto;text-align:center;font-size:30px;height:100px;line-height:100px;font-weight:900;}

#logo img{width:50px;position:relative;top:12px;}

#dlk{margin:0 auto;text-align:center;padding:30px 0;font-size:25px;position:relative;}

#zt{display:inline-block;}

input{margin:10px 0;height:35px;border-radius:15px;width:250px;outline:none;text-align:center;}

#dlan{width:150px;height:45px;border-radius:10px;background-color:#0066ff;color:#ffffff;font-size:20px;font-weight:900px;margin:25px 70px 0 0;}

#zhuangtai{display:inline-block;position:absolute;margin-top:25px;}

#zt{border:1px solid #111111;}

#ztjh{display:none;border:1px solid #111111;}

#ztjh ul{list-style-type:none;}

.ztl:hover{background-color:#989898;}

</style>

</head>

<body>

</div>

</div>

<ul>

</ul>

</div>

window.onload=function(){

var lgl=document.getElementById("logo");

var zmb=document.getElementById("zhu");

lgl.onmousedown=function(event){

//实现拖拽功能

event=event||window.event;

var zx=event.clientX-zmb.offsetLeft;

var zy=event.clientY-zmb.offsetTop;

document.onmousemove=function(event){

event=event||window.event;

var zmb=document.getElementById("zhu");

var dx=event.clientX-zx;

var dy=event.clientY-zy;

var w=zmb.offsetWidth;

var h=zmb.offsetHeight;

var maxl=document.documentElement.clientWidth-w;

var maxt=document.documentElement.clientHeight-h;

if(dx<0){

dx=0;

}

if(dx>maxl){

dx=maxl;

}

if(dy<0){

dy=0;

}

if(dy>maxt){

dy=maxt;

}

zmb.style.left=dx+"px";

zmb.style.top=dy+"px";

}

document.onmouseup=function(){

document.onmousemove=null;

document.onmouseup=null;

}

//实现状态栏

var zt=document.getElementById("zt");

var ztjh=document.getElementById("ztjh");

var l=document.getElementsByTagName("li");

zt.onclick=function(){

ztjh.style.display="block";

}

for(var i=0;i<l.length;i++){

l[i].onclick=function(){

ztjh.style.display="none";

var t=this.getElementsByTagName("span")[1];

var kb=document.getElementById("kb");

var dj=t.innerHTML;

var xs=kb.innerHTML;

t.innerHTML=xs;

kb.innerHTML=dj;

}

</script>

</body>

</html>

写回答关注

1回答

等一個晴天: 2015-12-17 14:40:34

封装拖拽代码，对任意div实现拖拽

<!DOCTYPE html>
<html>
<head>
    <title>可拖拽的登录框</title>
    <style>
        #loginDiv{width:300px;height:220px;position:absolute;background:#eee;box-shadow:0 0 10px #ccc;color:#353434;font-family:"微软雅黑"}
        #loginDiv .close{height:30px;line-height:30px;width:30px; text-align:center;position:absolute;right:0} 
        #loginDiv .top{height:30px;line-height:30px;text-align:center;cursor:move;}
        #loginDiv .container {margin:20px 0}
        #loginDiv .container p{padding:10px 30px}
        #loginDiv .login{text-align:center}
        #loginDiv .login a{background-color:#0982f7;color:#fff;padding:7px 20px;border-radius:6px;text-decoration:none;letter-spacing:3px;transition:all ease 0.5s}
         #loginDiv .login a:hover{box-shadow:0 0 10px #0982f7;}
    </style>
</head>
<body>
    <div id="loginDiv">
        <div id="loginClose" class="close">X</div>
        <div class="top">登录</div>
        <div class="container">
            <p>用户名:<input  type="text" placeholder="请输入用户名"/></p>
            <p>密&nbsp;&nbsp;&nbsp;码:<input type="text" placeholder="请输入密码" /></p>
        </div>
        <div class="login"><a href="javascript:void(0)">登录</a></div>
    </div>
    <script>
        var Drag = {
            obj: null,
            init: function (obj) {
                obj.onmousedown = this.start;
            },
            start: function (e) {
                var obj;
                var e = Drag.fixEvent(e);
                e.preventDefault && e.preventDefault();
                Drag.obj = obj = this;
                obj.x = e.clientX - obj.offsetLeft;
                obj.y = e.clientY - obj.offsetTop;
                document.onmousemove = Drag.move;
                document.onmouseup = Drag.stop;
            },
            move: function (e) {
                e = Drag.fixEvent(e);
                var left = e.clientX - Drag.obj.x,
                      top = e.clientY - Drag.obj.y,
                      winHeight = document.documentElement.clientHeight || document.body.clientHeight,
                      winWidth = document.documentElement.clientWidth || document.body.clientWidth;
                if (left <= 0) left = 0;
                if (left >= winWidth - Drag.obj.offsetWidth) left = winWidth - Drag.obj.offsetWidth;
                console.log(document.documentElement.clientWidth);
                if (top <= 0) top = 0;
                if (top >= winHeight - Drag.obj.offsetHeight) top = winHeight - Drag.obj.offsetHeight;
                Drag.obj.style.left = left + 'px';
                Drag.obj.style.top = top + 'px';
            },
            stop: function () {
               Drag.obj=document.onmousemove = document.onmouseup = null;
            },
            fixEvent: function (e) {
                var e = e || window.event;
                return e;
            }
        }

        window.onload = function () {
            var o = document.getElementById("loginDiv");
            Drag.init(o);
        }
    </script>
</body>
</html>

0 1

DOM事件探秘

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

99528 学习 · 1305 问题

查看课程

相似问题

qq 拖拽问题

回答 1

DOM 操作拖拽

回答 3

拖拽范围判断

回答 1

QQ面板无法拖拽

回答 1

无法设拖拽边界

回答 1

打开慕课网App查看更多内容