js最簡單的拖拽效果實現代碼

其實對於彈出層而言，拖拽最初的目的很單純，就是為了通過拉開層，使被彈出層擋住的內容可見，（當然，後來關於拖拽的功能不斷被最佳化，使得拖拽的應用有了別的意義，最典型的如igoogle的自訂首頁，通過拖放的形式滿足使用者自訂想要的內容模組順序和位置）。

本文討論的重點不是iGoogle的拖放效果，那屬於進階篇，本文是拖拽的“第一階”，如題，實現最簡單的拖拽。
這裡的“最簡單”即不考慮多個拖拽層的堆疊順序，不考慮拖拽範圍限制，不考慮類似iGoogle的“dragTo”的效果等等。。。

恩，廢話不多說了，先給大家看個執行個體吧：

拖我試試...
content...點此-->開啟 由於我是直接在頁面上內嵌的所有代碼，加上部落格園第三方外掛程式的原因，代碼執行效率高，有可能運行起來不是很流暢

拖拽其實就涉及的滑鼠的三個事件，onmousedown,onmouseup,onmousemove,再結合擷取滑鼠的位置以及層的left和top即可實作類別似的效果。

在編碼的時候，有兩個需要注意的地方，一個是擷取當前樣式，currentStyle只在ie下有效，故對於非ie我們可以通過getComputedStyle實現（當然，對於這種需要擷取的屬性不是很多的情況，您也可以直接用obj.style[key]來擷取您當前想要的屬性值）

複製代碼 代碼如下:function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+

另一個點就是在擷取滑鼠位置時要用到event，event這個東西很奇怪，ie下是局部變數，moz核心下是全域變數（說法不準確，只是便於理解），所以在擷取滑鼠位置時候要對event做個判斷

複製代碼 代碼如下:bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部變數，ff下全域變數
params.isDrag = true;
params._X = e.clientX; params._Y = e.clientY;
};

恩，注意以上兩點，結合正確的思路其實就可以了，並不難，下面提供參考代碼：

複製代碼 代碼如下:function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+

var drag = function(bar, target){
var params = {
startLeft:0,
startTop:0,
_X:0,
_Y:0,
isDrag:false
};
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
bar.onmousedown = function(e){
e = e?e:window.event; //'event' ie下局部變數，ff下全域變數
params.isDrag = true;
params._X = e.clientX; params._Y = e.clientY;
};
document.onmouseup = function(){
params.isDrag = false;
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
};
document.onmousemove = function(e){
var e = e?e:window.event;
if(params.isDrag){
var curX = e.clientX, curY = e.clientY, desL = curX-params._X+parseInt(params.startLeft), desT = curY-params._Y+parseInt(params.startTop);
target.style['left'] = desL>=0?desL + 'px':0;
target.style['top'] = desT>=0?desT + 'px':0;
}
}
};

恩，至此，本文差不多可以結束了，關於類似的iGoogle的拖拽進階篇，有時間會繼續的，下面結合拖拽舉個綜合彈出層的例子，

不設任何options參數的box（預設高200px，寬300px）
無遮罩的box
這個彈出層外掛程式是我在上文中就提到的，而且還提供了源檔案下載，在此只是加上了拖動效果而已
ps：由於代碼高亮外掛程式的原因，遮罩層上會有白色小方塊，暫沒做處理。。。