 
<body> 
<div id="block" style="width:100px; height:100px; position:relative; background-color:#FF0000";></div> 
<script> 
var bb = document.getElementById("block"); 
bb.onmousedown = function(){ 
//獲取鼠標(biāo)當(dāng)前坐標(biāo) 
var pageX = event.clientX; 
var pageY = event.clientY; 
//獲取block的坐標(biāo)，左邊界和上邊界 
var offX = parseInt(this.style.left)||0; 
var offY = parseInt(this.style.top)||0; 
//計(jì)算出鼠標(biāo)坐標(biāo)相對(duì)于block坐標(biāo)的間距 
var offLX = pageX-offX; 
var offLY = pageY-offY; 
if(!document.onmousemove){ 
document.onmousemove = function(){ 
bb.style.left=event.clientX-offLX; //設(shè)置block的X坐標(biāo) 
bb.style.top=event.clientY-offLY; //設(shè)置block的Y坐標(biāo) 
} 
} 
} 
document.onmouseup = function(){document.onmousemove = null;} //鼠標(biāo)彈起 
</script> 
</body> 

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript中的this硬綁定
這篇文章主要為大家詳細(xì)介紹了JavaScript中的this顯示綁定和硬綁定，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下
2022-10-10
javascript操作ul中l(wèi)i的方法
這篇文章主要介紹了javascript操作ul中l(wèi)i的方法,可實(shí)現(xiàn)鼠標(biāo)經(jīng)過li標(biāo)簽項(xiàng)對(duì)應(yīng)改變背景色的功能,涉及javascript鼠標(biāo)事件及頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下
2015-05-05
js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖
這篇文章主要介紹了js實(shí)現(xiàn)自動(dòng)播放勻速輪播圖，帶勻速運(yùn)動(dòng)函數(shù)封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
關(guān)于layui的動(dòng)態(tài)圖標(biāo)不顯示的解決方法
今天小編就為大家分享一篇關(guān)于layui的動(dòng)態(tài)圖標(biāo)不顯示的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
詳解SPA中前端路由基本原理與實(shí)現(xiàn)方式
這篇文章主要介紹了詳解SPA中前端路由基本原理與實(shí)現(xiàn)方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
小程序?qū)崿F(xiàn)點(diǎn)擊動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點(diǎn)擊動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解
從 ES2019 中開始引入了一種扁平化數(shù)組的新方法，可以展平任何深度的數(shù)組，這篇文章主要介紹了JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解,需要的朋友可以參考下
2023-06-06
canvas知識(shí)總結(jié)
本文主要介紹了canvas的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
微信小程序?qū)崿F(xiàn)的圖片保存功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的圖片保存功能,結(jié)合實(shí)例形式分析了微信小程序wx.downloadFile({})及wx.saveImageToPhotosAlbum({})函數(shù)圖片保存功能相關(guān)使用技巧,需要的朋友可以參考下
2019-04-04
鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效
本文章來給大家推薦一個(gè)不錯(cuò)的鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效效果，有需要了解的朋友可以參考一下
2013-08-08