原生js拖拽(第一課 未兼容)拖拽思路
更新時(shí)間：2013年03月29日 15:37:29 作者：
第一步點(diǎn)擊需要拖動(dòng)的元素,在點(diǎn)擊下的元素被選中，進(jìn)行move移動(dòng),當(dāng)鼠標(biāo)彈起的時(shí)候，停止動(dòng)作.點(diǎn)擊元素oDIV的時(shí)候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域
復(fù)制代碼 代碼如下:
/*
拖拽流程：
1、第一步點(diǎn)擊需要拖動(dòng)的元素
2、在點(diǎn)擊下的元素被選中，進(jìn)行move移動(dòng)
3、當(dāng)鼠標(biāo)彈起的時(shí)候，停止動(dòng)作
4、點(diǎn)擊元素oDIV的時(shí)候，可用的是oDIV區(qū)域，而move和up則是全局區(qū)域，也就是整個(gè)文檔通用，即應(yīng)該用document
*/
oDIV = document.getElementById("gaga");
oDIV.onmousedown = function( e ){ // 當(dāng)鼠標(biāo)點(diǎn)擊下去的時(shí)候
var diffX = e.clientX - oDIV.offsetLeft; // 點(diǎn)擊的位置距離瀏覽器最左邊的位置(clientX) 再減去被點(diǎn)擊元素距離最左邊的位置(oDIV.offetLeft) 在引動(dòng)的所點(diǎn)擊的元素距離最左邊的位置是不確定的 所以需要這個(gè)結(jié)果
var diffY = e.clientY - oDIV.offsetTop; // 點(diǎn)擊的位置距離瀏覽器頂部的位置(clientY) 再減去被點(diǎn)擊元素距離頂部的位置(oDIV.offsetTop) 在引動(dòng)的所點(diǎn)擊的元素距離頂部的位置是不確定的 所以需要這個(gè)結(jié)果
document.onmousemove = function( e ){ // 當(dāng)按下鼠標(biāo)不放的時(shí)候
var e = e || window.event;
oDIV.style.top = e.clientY - diffY + "px";
oDIV.style.left = e.clientX - diffX + "px";
};
document.onmouseup = function(){ // 當(dāng)鼠標(biāo)彈起的時(shí)候
document.onmousemove = null; // 清空鼠標(biāo)按下鼠標(biāo)不放的事件
document.onmouseup = null; // 清空鼠標(biāo)彈起事件
}
};
相關(guān)文章
至2023年最好用的兼容多瀏覽器的原生js復(fù)制函數(shù)copyText
因?yàn)楹笈_(tái)需要增加一些復(fù)制一些內(nèi)容非表單中內(nèi)容，那么下面這個(gè)函數(shù)就非常的好用了，其實(shí)也是利用了表單的數(shù)據(jù)權(quán)限比較容易突破，下面是具體的實(shí)現(xiàn)函數(shù)，大家可以拿走2023-05-05
JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求的示例
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請(qǐng)求的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
微信小程序的數(shù)據(jù)存儲(chǔ)與Django等服務(wù)發(fā)送請(qǐng)求?講解
這篇文章主要為大家介紹了微信小程序的數(shù)據(jù)存儲(chǔ)與Django等服務(wù)發(fā)送請(qǐng)求講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
Valerio 發(fā)布了 Mootools...2006-09-09
qrcode生成二維碼微信長(zhǎng)按無法識(shí)別問題的解決
這篇文章主要介紹了qrcode生成二維碼微信長(zhǎng)按無法識(shí)別問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了JS 替換和時(shí)間插件的結(jié)合使用代碼，需要的朋友可以參考下2013-07-07
無語(yǔ)，javascript居然支持中文(unicode)編程！
無語(yǔ)，javascript居然支持中文(unicode)編程！...2007-04-04
這篇文章主要介紹了JavaScript之ECharts用法講解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Javascript中的包裝類型介紹,包裝類型是指在執(zhí)行代碼的一瞬間把數(shù)據(jù)包裝成引用類型,本文講解的就是這個(gè)小知識(shí),需要的朋友可以參考下2015-04-04
如何利用網(wǎng)頁(yè)彈出各種形式的窗口，我想大家大多都是知道些的，但那種多種多樣的彈出式窗口是怎么搞出來的，平時(shí)利用業(yè)余時(shí)間整理了一些，需要的朋友可以參考一下2012-12-12