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