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.onmousemove=null;
            document.onmouseup=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.onmousedown=drag;//這裏的circle是上面在第一步的時候就已經定義的變量