纯js实现拖动效果（鼠标事件）

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
            margin:0;
            padding:0;
            width:100%;;
            height: 1000px;
        }
        #box{
            height: 400px;
            width:400px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-200px;
            background: #ddd;
        }
        #small-box{
            height: 50px;
            width:50px;
            position: absolute;
            left:0;
            top:0;
            background: red;
            cursor:move ;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="small-box"></div>
    </div>
<script>
    window.onload=function(){
        var box=document.querySelector('#small-box');
        var body=document.querySelector('body');
        var index=0;
        var x1,y1;
        box.onmousedown=function(e){
            index=1;              //鼠标按下才能触发onmousemove方法
            var x=e.clientX;     //鼠标点击的坐标值，x
            var y=e.clientY;
            var left= this.style.left;
            left=left.substr(0,left.length-2);   //去掉px
            var top=this.style.top;
            top=top.substr(0,top.length-2);
            x1=parseInt(x-left);
            y1=parseInt(y-top);
        };
        box.onmousemove=function(e){
            if(index===1){
                this.style.left=e.clientX-x1+'px';
                this.style.top=e.clientY-y1+'px';
                if(this.style.left.substr(0,this.style.left.length-2)<0){
                    this.style.left=0;
                };
                if(this.style.top.substr(0,this.style.top.length-2)<0){
                    this.style.top=0;
                };
                if(this.style.top.substr(0,this.style.top.length-2)>350){
                    this.style.top='350px';
                };
                if(this.style.left.substr(0,this.style.left.length-2)>350){
                    this.style.left='350px';
                };
            }
        };
        box.onmouseup=function(e){
            index=0;
        };
        body.onmouseup=function(e){
            box.onmouseup();      //类似可以index=0;
        }
    }
</script>
</body>
</html>

效果图：

 

 

posted @ 2017-06-12 14:07  小龙小龙小龙  阅读(3722)  评论(0)  编辑  收藏  举报