一、一些無關痛癢的嘮叨

拖拽還是挺不錯的一個頁面效果，我個人認為，其生命力在於可以讓用戶自己做一些操作，所謂自定義。例如：
①瀏覽器標簽順序的拖拽切換
現在基本上所有的選項卡式的瀏覽器都有順序拖拽切換的功能，如下圖：

類似的效果我們可以在QQ精要新聞彈出框中看到，見下圖：

②把內容放在自己喜歡的位置上
這個在桌面軟件上見到的最多，比如視頻播放器，Adobe系列軟件(CS3+)等。

在web頁面上，我們也會見到拖拽效果，但是，一般不會太復雜。例如iGoogle（點擊這裏訪問）：//zxx:域名已經不是點cn結尾，而是點com點hk

或是我最近經常使用的新浪微博，其彈出層是可以拖拽的，與人人，或是QQ郵箱的彈出層不同，好處在於，在我輸入一些信息的時候，常需要查看頁面上的一些內容，有了拖拽功能，我就可以把彈出框移到一邊，以便可以看到擋在下面的信息，這也是拖拽最核心最基礎的功能。（下圖是新浪微博註冊頁面點擊登錄按鈕後的彈出層）

二、JavaScript實現原理簡述

在AS3中，使用startDrag()就能實現拖拽，但是js中，卻沒有此方法，但是也是可以實現的，說穿了，挺簡單的。實現拖拽方法不少，我呢，js功力尚淺，只知道一種實現原理。如下：
①鼠標按下+鼠標移動 → 拖拽
②鼠標松開 → 無拖拽
③鼠標偏移 → 拖拽距離

用JavaScript事件方法表示就是：
① onmousedown + onmousemove → startDrag()
② onmouseup → stopDrag()
③ ……

關鍵點就是讓鼠標的偏移值賦給拖拽對象。舉個例子吧：
比如說鳳姐要拉你回家做老公，你是死活不願意的，結果拉不動你，這就像我們無法拖拽一個普通的頁面元素一樣。
可以鳳姐是前後500年未有的“美人”，功力深厚，她用一股無形的內力將你拴住，內力收多少距離，你抵抗不住，只能被拉回多少距離。結果外人看來，你好像是主動跟著鳳姐走的。這就像拖拽一樣，鼠標偏移的多少，讓被拖拽的元素跟著移動多少，那麽，就好像元素是跟著鼠標走的。

好吧，具體細節就不講了，怕講多了會起沙塵暴（混亂），那我就罪人了。

三、效果展示、代碼及使用

前面兩小段，我承認，有湊篇幅的嫌疑，不過這部分不像山西疫苗那樣，是沒有水分的。

我已經把拖拽的效果封裝在一個方法裏面了，在本文實例中，此方法獨立在一個js文件中，也可以當做一個小插件使用。

此拖拽效果js大小壓縮後不足1K，只要幾十行代碼就可以搞定了，我不喜歡在文章裏放長長的代碼。

您可以狠狠地點擊這裏：zxx.drag.1.0.js 或壓縮版zxx.drag.1.0-min.js （可“右鍵 – [目標|鏈接]另存為”下載）

// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
 

// zxx.drag v1.0 2010-03-23 元素的拖拽實現

var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};
//獲取相關CSS屬性
var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     
};

//拖拽的實現
var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
    }
    //o是移動對象
    bar.onmousedown = function(event){
        params.flag = true;
        if(!event){
            event = window.event;
            //防止IE文字選中
            bar.onselectstart = function(){
                return false;
            }  
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    document.onmouseup = function(){
        params.flag = false;    
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
    };
    document.onmousemove = function(event){
        var e = event ? event: window.event;
        if(params.flag){
            var nowX = e.clientX, nowY = e.clientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";
            if (event.preventDefault) {
                event.preventDefault();
            }
            return false;
        }
        
        if (typeof callback == "function") {
            callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
        }
    }    
};

// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
// zxx.drag v1.0 2010-03-23
var params={left:0,top:0,currentX:0,currentY:0,flag:false};var getCss=function(b,a){return b.currentStyle?b.currentStyle[a]:document.defaultView.getComputedStyle(b,false)[a]};var startDrag=function(a,b,c){if(getCss(b,"left")!=="auto"){params.left=getCss(b,"left")}if(getCss(b,"top")!=="auto"){params.top=getCss(b,"top")}a.onmousedown=function(d){params.flag=true;if(!d){d=window.event;a.onselectstart=function(){return false}}var f=d;params.currentX=f.clientX;params.currentY=f.clientY};document.onmouseup=function(){params.flag=false;if(getCss(b,"left")!=="auto"){params.left=getCss(b,"left")}if(getCss(b,"top")!=="auto"){params.top=getCss(b,"top")}};document.onmousemove=function(i){var j=i?i:window.event;if(params.flag){var f=j.clientX,d=j.clientY;var h=f-params.currentX,g=d-params.currentY;b.style.left=parseInt(params.left)+h+"px";b.style.top=parseInt(params.top)+g+"px";if(i.preventDefault){i.preventDefault()}return false}if(typeof c=="function"){c(parseInt(params.left)+h,parseInt(params.top)+g)}}};

使用如下：
首先調用js文件，如下：

<script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>

然後使用startDrag()方法綁定拖拽效果，startDrag()方法有兩個參數，第一個是點擊的對象（即點擊那裏可以實現拖拽，例如彈出層的標題欄），第二個是拖拽的對象（例如一個彈出層）。也就是startDrag(觸發拖拽對象，被拖拽對象)。我做了個簡單的圖示意下，如下：

具體使用如下示例代碼：
HTML/CSS

<style type="text/css">
#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
</style>

<div id="box">
    <div id="main">
        <div id="bar">拖拽</div>
        <div id="content">
            內容……
        </div>
    </div>
</div>

JS部分

<script src="http://www.zhangxinxu.com/study/js/zxx.drag.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    var oBar = document.getElementById("bar");
    startDrag(oBar, oBox);
</script>

上面js部分，加粗代碼使關鍵，是不是使用很簡單啊。

您可以狠狠地點擊這裏：拖拽效果demo

拖拽效果截圖：

說明：被拖拽的最想如果不是絕對定位或是相對定位（position:absolute/relative），那麽是不會看到效果的。

四、掃尾工作

實現最簡單的拖拽效果，方便跟我一樣js功力尚淺的人學習，也方便日後的使用：直接調用js鏈接，一句startDrag(objA, objB);就可以實現效果了。還是那句話，如果您發現文章中有表述不準確或是有相關問題需要交流可以通過評論或是去這裏進行提問交流。
原創文章，轉載請註明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]

JavaScript實現最簡單的拖拽效果