js最簡單的拖拽效果實現(xiàn)代碼

更新時間：2010年09月24日 12:37:34 作者：

說到拖拽功能，現(xiàn)在各大，中，小型網(wǎng)站都基本上有類似的東西，特別是對彈出層拖拽，更是常見的一塌糊涂。。。

其實對于彈出層而言，拖拽最初的目的很單純，就是為了通過拉開層，使被彈出層擋住的內(nèi)容可見，（當然，后來關于拖拽的功能不斷被優(yōu)化，使得拖拽的應用有了別的意義，最典型的如igoogle的自定義首頁，通過拖放的形式滿足用戶自定義想要的內(nèi)容模塊順序和位置）。

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

恩，廢話不多說了，先給大家看個實例吧：

拖我試試...
content...點此-->打開由于我是直接在頁面上內(nèi)嵌的所有代碼，加上博客園第三方插件的原因，代碼執(zhí)行效率高，有可能運行起來不是很流暢

拖拽其實就涉及的鼠標的三個事件，onmousedown,onmouseup,onmousemove,再結合獲取鼠標的位置以及層的left和top即可實現(xiàn)類似的效果。

在編碼的時候，有兩個需要注意的地方，一個是獲取當前樣式，currentStyle只在ie下有效，故對于非ie我們可以通過getComputedStyle實現(xiàn)（當然，對于這種需要獲取的屬性不是很多的情況，您也可以直接用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內(nèi)核下是全局變量（說法不準確，只是便于理解），所以在獲取鼠標位置時候要對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的拖拽進階篇，有時間會繼續(xù)的，下面結合拖拽舉個綜合彈出層的例子，

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

您可能感興趣的文章: