先來看看效果：拖動面板演示效果

就是不能停止折騰

HTML結(jié)構(gòu)很簡單，一個(gè)大的div包含三個(gè)小的div 如圖：

HTML結(jié)構(gòu)

然后開始思考如何來寫鼠標(biāo)拖動實(shí)現(xiàn)的代碼。

1. 點(diǎn)擊到標(biāo)題才能拖動.
2. 標(biāo)題被點(diǎn)擊后狮含，觸發(fā)點(diǎn)擊事件婶芭，同時(shí)給點(diǎn)擊事件綁定鼠標(biāo)移動事件。
3. 當(dāng)鼠標(biāo)移動時(shí)坯苹，將面板也按照鼠標(biāo)的位置進(jìn)行移動。
4. 鼠標(biāo)松開后摇天，清空鼠標(biāo)移動事件粹湃。

這是大方向的思路，然后我們細(xì)化一下泉坐。

1. 標(biāo)題被點(diǎn)擊为鳄，首先要獲取到class="text"的第一個(gè)元素，設(shè)置onclick事件腕让。
2. 綁定的鼠標(biāo)移動事件中孤钦，首先得到鼠標(biāo)的位置，然后得到面板的位置纯丸，需要進(jìn)行一點(diǎn)運(yùn)算看看讓面板怎樣移動偏形，這個(gè)后面會詳解。
3. 對于最后清空鼠標(biāo)移動事件：標(biāo)題鼠標(biāo)松開時(shí)觸發(fā)onmouseup事件觉鼻，此時(shí)將頁面的onmousemove設(shè)置為null就清空了俊扭。
   4.由于getelementsByClassName在低于IE10的版本下不支持，所以我們需要封裝一個(gè)用className獲取元素的方法坠陈。

OK萨惑，思路有了捐康，開始寫代碼。

首先封裝用className獲取元素的方法庸蔼，因?yàn)槲覀兒竺鏁玫浇庾埽唧w寫法如下。

function getByClass('className','parent'){
    var oParent=parent? document.getElementById(parent):document,
    eles=[],
    elements=oParent.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className==className){
            eles.push(elements[i]);
        }
    }
    return eles;
}

這個(gè)方法傳入兩個(gè)參數(shù)className和parent姐仅，其中parent如果沒有傳入的話花枫，就是body，這個(gè)方法最后返回一個(gè)數(shù)組萍嬉。

然后

`window.onload=drag();`

開始編寫drag()函數(shù)

` function drag() {
var oTitle = getByClass('text','things')[0];
oTitle.onmousedown = fnDown;
oTitle.onmouseup = function(){  
        document.onmousemove = null;  
    } } `

首先獲取到標(biāo)題乌昔，也就是text的第一個(gè)元素，然后給標(biāo)題綁定方法fnDown壤追，在fnDown中我們會寫鼠標(biāo)移動時(shí)該怎么做，然后設(shè)置當(dāng)鼠標(biāo)松開時(shí)清空文檔的鼠標(biāo)移動事件供屉。

鼠標(biāo)按下時(shí)我們要做什么行冰？獲取鼠標(biāo)的位置，面板的位置伶丐，然后確定如何移動面板悼做。

鼠標(biāo)的位置是 (event.clientX,event.clientY) 要獲取面板的位置，我們先找到面板
var oDrag = document.getElementById('things');
面板的位置就是 (oDrag.offsetLeft,oDrag.offsetTop) 然后我們需要計(jì)算哗魂，鼠標(biāo)移動時(shí)，面板的位置應(yīng)該是什么。

用一張圖來說一下（由于圖片過于清晰胆筒，加載可能要多個(gè)3秒鐘）：

面板移動詳細(xì)圖解

可以看到拘悦，我們需要儲存一下鼠標(biāo)點(diǎn)擊時(shí)與面板之間的位置關(guān)系，可以用event.clientX減去oDrag.offsetLeft表示水平偏移量disX组题，用event.clientY減去oDrag.offsetTop來表示垂直偏移量disY葫男。

儲存了偏移量之后，就很好做了崔列，直接先將面板的位置設(shè)置為與鼠標(biāo)相同梢褐，此時(shí)鼠標(biāo)在面板的左上角，然后再根據(jù)偏移量將面板向左移disX赵讯，向下移disY就好了盈咳。

但是還要考慮到一點(diǎn)，移動的時(shí)候是不能移動到邊框外的边翼，比如這樣：

小BUG

想一下鱼响，假如向左向上移動出框了，那么event.clientX-oDrag.offsetLeft一定是負(fù)數(shù)讯私，對于Top和clientY也是一樣热押，所以我們要讓xiaoyu0的時(shí)候都等于0 就是貼在了邊框上西傀。

然后向下，向右桶癣，只要最大不超過瀏覽器寬度即可拥褂。用clientWidth和clientHeight獲取瀏覽器寬度，然后大于最大時(shí)牙寞，等于最大饺鹃。

鼠標(biāo)移動代碼最終如下：

function fnDown() {
    var oDrag = document.getElementById('things'),
    disX = event.clientX-oDrag.offsetLeft,
    disY = event.clientY-oDrag.offsetTop;
    document.onmousemove=function(event) {
        event = event||window.event;
        move(event,disX,disY);
    }
}
function move(event,disX,disY) {
    var oDrag = document.getElementById('things'),
    l = event.clientX-disX,
    t = event.clientY-disY,
    winWidth = document.documentElement.clientWidth || document.body.clientWidth,
    winHeight = document.documentElement.clientHeight || document.body.clientHeight,
    maxW= winWidth-oDrag.offsetWidth,
    maxH = winHeight-oDrag.offsetHeight;
    if (l<0) {
        l = 0;
    }else if(l>maxW){
        l = maxW;
    }
    if (t<0) {
        t = 0;
    }else if (t>maxH) {
        t = maxH;
    }
    oDrag.style.left = l+'px';
    oDrag.style.top = t+'px';
}

其中對獲取瀏覽器寬度和高度做了一下瀏覽器兼容處理，最后改變位置就設(shè)置oDrag.style.left和top屬性间雀。

OK悔详，完成。
最終代碼托管在coding上供網(wǎng)友參考：
https://coding.net/u/i_imT/p/TF_/git/blob/master/demo-drag.html

掏糞原創(chuàng)惹挟，轉(zhuǎn)載請注明出處茄螃。 新浪微博ID：我叫掏糞i