先來看看效果：拖動面板演示效果
HTML結構很簡單，一個大的div包含三個小的div 如圖：
然后開始思考如何來寫鼠標拖動實現的代碼。
- 點擊到標題才能拖動.
- 標題被點擊后，觸發點擊事件，同時給點擊事件綁定鼠標移動事件。
- 當鼠標移動時，將面板也按照鼠標的位置進行移動。
- 鼠標松開后，清空鼠標移動事件。
這是大方向的思路，然后我們細化一下。
- 標題被點擊，首先要獲取到class="text"的第一個元素，設置onclick事件。
- 綁定的鼠標移動事件中，首先得到鼠標的位置，然后得到面板的位置，需要進行一點運算看看讓面板怎樣移動，這個后面會詳解。
- 對于最后清空鼠標移動事件：標題鼠標松開時觸發onmouseup事件，此時將頁面的onmousemove設置為null就清空了。
4.由于getelementsByClassName在低于IE10的版本下不支持，所以我們需要封裝一個用className獲取元素的方法。
OK，思路有了，開始寫代碼。
首先封裝用className獲取元素的方法，因為我們后面會用到，具體寫法如下。
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;
}
這個方法傳入兩個參數className和parent，其中parent如果沒有傳入的話，就是body，這個方法最后返回一個數組。
然后
`window.onload=drag();`
開始編寫drag()函數
` function drag() {
var oTitle = getByClass('text','things')[0];
oTitle.onmousedown = fnDown;
oTitle.onmouseup = function(){
document.onmousemove = null;
} } `
首先獲取到標題，也就是text的第一個元素，然后給標題綁定方法fnDown，在fnDown中我們會寫鼠標移動時該怎么做，然后設置當鼠標松開時清空文檔的鼠標移動事件。
鼠標按下時我們要做什么？獲取鼠標的位置，面板的位置，然后確定如何移動面板。
鼠標的位置是 (event.clientX,event.clientY) 要獲取面板的位置，我們先找到面板
var oDrag = document.getElementById('things');
面板的位置就是 (oDrag.offsetLeft,oDrag.offsetTop) 然后我們需要計算，鼠標移動時，面板的位置應該是什么。
用一張圖來說一下（由于圖片過于清晰，加載可能要多個3秒鐘）：
可以看到，我們需要儲存一下鼠標點擊時與面板之間的位置關系，可以用event.clientX減去oDrag.offsetLeft表示水平偏移量disX，用event.clientY減去oDrag.offsetTop來表示垂直偏移量disY。
儲存了偏移量之后，就很好做了，直接先將面板的位置設置為與鼠標相同，此時鼠標在面板的左上角，然后再根據偏移量將面板向左移disX，向下移disY就好了。
但是還要考慮到一點，移動的時候是不能移動到邊框外的，比如這樣：
想一下，假如向左向上移動出框了，那么event.clientX-oDrag.offsetLeft一定是負數，對于Top和clientY也是一樣，所以我們要讓xiaoyu0的時候都等于0 就是貼在了邊框上。
然后向下，向右，只要最大不超過瀏覽器寬度即可。用clientWidth和clientHeight獲取瀏覽器寬度，然后大于最大時，等于最大。
鼠標移動代碼最終如下：
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';
}
其中對獲取瀏覽器寬度和高度做了一下瀏覽器兼容處理，最后改變位置就設置oDrag.style.left和top屬性。
OK，完成。
最終代碼托管在coding上供網友參考：
https://coding.net/u/i_imT/p/TF_/git/blob/master/demo-drag.html
