js拖拽效果

平时遇见过很多页面上的某一些元素可以跟随鼠标的移动而移动，我觉这个效果特别的好玩，然后我就自己试着写咯一下这个效果，

我写的效果页面是一个很简单的，我就定义咯一个div元素，然后鼠标按下去的时候 拖动鼠标，物体就会跟随我鼠标移动而移动，

当鼠标放开的时候，物体就停止移动。

首先我们在一个页面上添加一个div  ,然后给他加上一些修饰的样式。

html代码：

<div class="circle" id="circle"></div>

css代码：

.circle{ width: 80px; height: 80px; border-radius: 50%; background: #ff0000;position: absolute; left: 100px; top: 200px;transition: all 0.0001s ease;
        -moz-transition: all  ease; /* Firefox 4 */
        -webkit-transition: all  ease; /* Safari 和 Chrome */
        -o-transition: all  ease; }
 .circle:hover:before{content:""; background: #ff0000; width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: .5;transition: all 0.0001s ease;
        -moz-transition: all  ease; /* Firefox 4 */
        -webkit-transition: all  ease; /* Safari 和 Chrome */
        -o-transition: all  ease;}

接下来就是实现我们效果的重中之重咯。在开始写js的代码的时候我们一定要不思路理清楚

A、找到我们要拖动的那个元素

B、实现拖拽效果（首先鼠标按下去，然后拖动，最后释放鼠标）

1、第一步嘛主要是懂一点js都会明白，不就是doucument.getElementById("id")吗？

我们来定义一个变量

var  circle = document.getElementById('circle');

2、第二步，我们来定义一个函数，方便等下我们调用

function drag(ev){
        var  ev = ev || window.event;
        var circle=document.getElementById('circle'),
            disX = ev.clientX - <span style="color:#ff0000;">circle.offsetLeft</span>,
            disY = ev.clientY - <span style="color:#ff0000;">circle.offsetTop</span>;
            //alert("clientX(鼠标指针具体显示频幕左边的距离):"+ev.clientX+"\nclientY(鼠标指针具体显示频幕上面的距离):"+ev.clientY+"\noffsetLeft(物体距离左面的距离):"+circle.offsetLeft+"\noffsetTop(物体距离左面的距离):"+circle.offsetTop);
            //alert("disX:"+disX+"\ndisY:"+disY);
       <span style="color:#ff0000;"> document.onmousemove</span>=function(ev){
            ev = ev || window.event;
            drag_move(ev,disX,disY);
        }
        <span style="color:#ff0000;">document.onmouseup</span>=function(){
            document.οnmοusemοve=null;
            document.οnmοuseup=null;
        }

    }
    //
    function drag_move(ev,posX,posY){ //这里的posX 和 posY 与上面的disX  disY值一样的
        var circle=document.getElementById('circle'),
            left=ev.clientX-posX,//posX为鼠标指针距离左面的距离- 点击物体具体左面的距离（绝对定位left）
            top=ev.clientY-posY,//同上类似
            winW=document.documentElement.clientWidth || document.body.clientWidth,//网页可用宽度
            winH=document.documentElement.clientHeight || document.body.clientHeight,//网页可用高度
            maxW=winW-circle.offsetWidth,
            maxH=winH-circle.offsetHeight;
            //alert("winW"+winW);
        if(left<0){
            left=0;
        }else if(left>maxW){
            //这里是判断当物体距离显示屏幕左面的距离大于显示屏幕的宽度时
            left=maxW;
        }
        if(top<0){
            top=0;
        }else if( top >maxH){
            //这里是判断当物体距离显示屏幕上面的距离大于显示屏幕的高度时 
            top=maxH;
        }
        circle.style.left=left+'px';
        circle.style.top=top+'px';

    }

最后我们开始调用拖拽函数

circle.οnmοusedοwn=drag;//这里的circle是上面在第一步的时候就已经定义的变量