關於js實現最簡單的拖拽

說到拖拽功能，現在各大，中，小型**都基本上有類似的東西，特別是對彈出層拖拽，更是常見的一塌糊塗。。。

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

本文討論的重點不是igoogle的拖放效果，那屬於高階篇，本文是拖拽的「第一階」，如題，實現最簡單的拖拽。

這裡的「最簡單」即不考慮多個拖拽層的堆疊順序，不考慮拖拽範圍限制，不考慮類似igoogle的「dragto」的效果等等。。。

拖我試試...

content...

點此-->開啟由於我是直接在頁面上內嵌的所有**，加上第三方外掛程式的原因，**執行效率高，有可能執行起來不是很流暢

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

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

function getstyle(o,key)//'currentstyle' only for ie5.0+

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

bar.onmousedown = function(e);

function getstyle(o,key)//'currentstyle' only for ie5.0+
var drag = function(bar, target);
if(getstyle(target,'left') != 'auto')
if(getstyle(target,'top') != 'auto')
bar.onmousedown = function(e);
document.onmouseup = function()
if(getstyle(target,'top') != 'auto')
};	document.onmousemove = function(e)
}};

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

ps：由於**高亮外掛程式的原因，遮罩層上會有白色小方塊，暫沒做處理。。。

關於js實現最簡單的拖拽

js實現最簡單的拖拽

js拖拽功能的實現

JS 拖拽視窗的實現

關於js實現最簡單的拖拽

js實現最簡單的拖拽

js拖拽功能的實現

JS 拖拽視窗的實現

相關推薦