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