快捷導(dǎo)航

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

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

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

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

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

恩，廢話不多說了，先給大家看個(gè)實(shí)例吧：

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

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

在編碼的時(shí)候，有兩個(gè)需要注意的地方，一個(gè)是獲取當(dāng)前樣式，currentStyle只在ie下有效，故對(duì)于非ie我們可以通過getComputedStyle實(shí)現(xiàn)（當(dāng)然，對(duì)于這種需要獲取的屬性不是很多的情況，您也可以直接用obj.style[key]來獲取您當(dāng)前想要的屬性值）

復(fù)制代碼代碼如下:

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

另一個(gè)點(diǎn)就是在獲取鼠標(biāo)位置時(shí)要用到event，event這個(gè)東西很奇怪，ie下是局部變量，moz內(nèi)核下是全局變量（說法不準(zhǔn)確，只是便于理解），所以在獲取鼠標(biāo)位置時(shí)候要對(duì)event做個(gè)判斷

復(fù)制代碼代碼如下:

 
bar.onmousedown = function(e){ 
e = e?e:window.event; //'event' ie下局部變量，ff下全局變量 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
}; 

恩，注意以上兩點(diǎn)，結(jié)合正確的思路其實(shí)就可以了，并不難，下面提供參考代碼：

復(fù)制代碼代碼如下:

 
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; 
} 
} 
}; 

恩，至此，本文差不多可以結(jié)束了，關(guān)于類似的iGoogle的拖拽進(jìn)階篇，有時(shí)間會(huì)繼續(xù)的，下面結(jié)合拖拽舉個(gè)綜合彈出層的例子，

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

您可能感興趣的文章: