怎么用javascript進(jìn)行拖拽第1/2頁
本文譯自：http://www.webreference.com/programming/javascript/mk/column2/index.html
所有版權(quán)歸原文所有
Javascript的特點(diǎn)是dom的處理與網(wǎng)頁效果，大多數(shù)情況我們只用到了這個語言的最簡單的功能，比如制作圖片輪播/網(wǎng)頁的tab等等，這篇文章將向你展示如何在自己的網(wǎng)頁上制作拖拽．
有很多理由讓你的網(wǎng)站加入拖拽功能，最簡單的一個是數(shù)據(jù)重組．例如：你有一個序列的內(nèi)容讓用戶排序，用戶需要給每個條目進(jìn)行輸入或者用select選擇，替代前面這個方法的就是拖拽．或許你的網(wǎng)站也需要一個用戶可以拖動的導(dǎo)航窗口！那么這些效果都是很簡單：因?yàn)槟憧梢院苋菀椎膶?shí)現(xiàn)！
網(wǎng)頁上實(shí)現(xiàn)拖拽其實(shí)也不是很復(fù)雜．第一你需要知道鼠標(biāo)坐標(biāo)，第二你需要知道用戶鼠標(biāo)點(diǎn)擊一個網(wǎng)頁元素并實(shí)現(xiàn)拖拽，最后我們要實(shí)現(xiàn)移動這個元素．
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
獲取鼠標(biāo)移動信息
第一我們需要獲取鼠標(biāo)的坐標(biāo)．我們加一個用戶函數(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工具方法彈出蒙版，需要的朋友可以參考一下2013-05-05
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義難度的掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
javascript css紅色經(jīng)典選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項(xiàng)卡效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-05-05
JavaScript的變量聲明語句無論出現(xiàn)在何處，都會先于其他代碼首先被執(zhí)行，本文給大家介紹javascript聲明變量相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)走馬燈效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
js使瀏覽器窗口最大化實(shí)現(xiàn)代碼(適用于IE)
點(diǎn)擊最大化按鈕后，瀏覽器的內(nèi)容填充滿顯示器，瀏覽器窗口的邊框被擠出顯示器。而該js的最大化效果是瀏覽器的邊框在顯示器內(nèi)顯示，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
DOCTYPE是document type(文檔類型)的簡寫，在web設(shè)計(jì)中用來說明你用的XHTML或者HTML是什么版本。2010-04-04
本篇文章主要介紹了JS中傳遞參數(shù)的幾種不同方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
$.browser.msie 為空或不是對象問題的多種解決方法
因?yàn)槭褂昧薺query判斷ie，所以使用了$.browser.msie但是在jquery 1.9以后的版本中不再支持$.browser而使用$.browser來替代2017-03-03
js或jquery動態(tài)輸出select option的實(shí)現(xiàn)代碼
在 JavaScript 中動態(tài)生成 <option> 元素并添加到 <select> 下拉列表中,可以通過以下幾種方式實(shí)現(xiàn),以下是不同場景下的完整代碼示例2025-03-03