怎么用javascript進(jìn)行拖拽第1/2頁
本文譯自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版權(quán)歸原文所有
Javascript的特點(diǎn)是dom的處理與網(wǎng)頁效果，大多數(shù)情況我們只用到了這個(gè)語言的最簡單的功能，比如制作圖片輪播/網(wǎng)頁的tab等等，這篇文章將向你展示如何在自己的網(wǎng)頁上制作拖拽．
有很多理由讓你的網(wǎng)站加入拖拽功能，最簡單的一個(gè)是數(shù)據(jù)重組．例如：你有一個(gè)序列的內(nèi)容讓用戶排序，用戶需要給每個(gè)條目進(jìn)行輸入或者用select選擇，替代前面這個(gè)方法的就是拖拽．或許你的網(wǎng)站也需要一個(gè)用戶可以拖動的導(dǎo)航窗口！那么這些效果都是很簡單：因?yàn)槟憧梢院苋菀椎膶?shí)現(xiàn)！
網(wǎng)頁上實(shí)現(xiàn)拖拽其實(shí)也不是很復(fù)雜．第一你需要知道鼠標(biāo)坐標(biāo)，第二你需要知道用戶鼠標(biāo)點(diǎn)擊一個(gè)網(wǎng)頁元素并實(shí)現(xiàn)拖拽，最后我們要實(shí)現(xiàn)移動這個(gè)元素．
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
獲取鼠標(biāo)移動信息
第一我們需要獲取鼠標(biāo)的坐標(biāo)．我們加一個(gè)用戶函數(shù)到document.onmousemove就可以了:
function mouseMove(ev){ function mouseCoords(ev){
ev = ev || window.event;
var mousePos = 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 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JS對外部文件的加載及對IFRMAME的加載的實(shí)現(xiàn),當(dāng)加載完成后,指定指向方法(方法回調(diào))
callback方法回調(diào)是指當(dāng)某方法執(zhí)行完成后,去自動執(zhí)行指定的另一方法的過程.下面舉兩個(gè)代表性的例子,說說JS世界里的方法回調(diào).2011-07-07
這篇文章主要介紹了JavaScript常用本地對象小結(jié)的相關(guān)資料,需要的朋友可以參考下2016-03-03
window.open想必大家對它并不陌生吧，那么如何讓它全屏就有些朋友不知道了，下面為大家介紹下其常用的命令及如何全屏2013-12-12
JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動的動畫效果封裝示例
這篇文章主要介紹了JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動的動畫效果,結(jié)合實(shí)例形式分析了JavaScript封裝結(jié)合定時(shí)器的頁面元素動態(tài)變換效果動畫相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
CSV文件一般是以逗號為分隔值的文件(Comma-Separated?Values,CSV,有時(shí)也稱為字符分隔值,因?yàn)榉指糇址部梢圆皇嵌禾?,其文件以純文本形式存儲表格數(shù)據(jù)(數(shù)字和文本),下面這篇文章主要給大家介紹了JS小知識之如何將CSV轉(zhuǎn)換為JSON字符串的相關(guān)資料,需要的朋友可以參考下2023-06-06
Ionic3 UI組件之a(chǎn)utocomplete詳解
這篇文章主要為大家詳細(xì)介紹了Ionic3 UI組件之a(chǎn)utocomplete的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
在js中將中文用gb2312編碼。如，“我”編碼后應(yīng)該是“%CE%D2”。2009-12-12
這篇文章主要為大家介紹了websocket直接繞過JS加密的示例及思路原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
在下面的文本框中輸入中文文字，按“轉(zhuǎn)化”，即可將其轉(zhuǎn)化為UTF-8字符。2010-06-06
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動評分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09