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