|
怎么用javascript進(jìn)行拖拽
本文譯自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版權(quán)歸原文所有
Javascript的特點是dom的處理與網(wǎng)頁效果，大多數(shù)情況我們只用到了這個語言的最簡單的功能，比如制作圖片輪播/網(wǎng)頁的tab等等，這篇文章將向你展示如何在自己的網(wǎng)頁上制作拖拽．
有很多理由讓你的網(wǎng)站加入拖拽功能，最簡單的一個是數(shù)據(jù)重組．例如：你有一個序列的內(nèi)容讓用戶排序，用戶需要給每個條目進(jìn)行輸入或者用select選擇，替代前面這個方法的就是拖拽．或許你的網(wǎng)站也需要一個用戶可以拖動的導(dǎo)航窗口！那么這些效果都是很簡單：因為你可以很容易的實現(xiàn)！
網(wǎng)頁上實現(xiàn)拖拽其實也不是很復(fù)雜．第一你需要知道鼠標(biāo)坐標(biāo)，第二你需要知道用戶鼠標(biāo)點擊一個網(wǎng)頁元素并實現(xiàn)拖拽，最后我們要實現(xiàn)移動這個元素．
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
獲取鼠標(biāo)移動信息
第一我們需要獲取鼠標(biāo)的坐標(biāo)．我們加一個用戶函數(shù)到document.onmousemove就可以了:
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
出處：sohotx.com
責(zé)任編輯：moby
上一頁 下一頁 怎么用javascript進(jìn)行拖拽 [2]
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 怎么用javascript進(jìn)行拖拽 [1]
第 2 頁 
