js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
更新時(shí)間：2017年03月20日 11:58:26 作者：18301695170
本文主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 200px;
height: 200px;
background: green;
position: absolute;
}
#div2{
width: 200px;
height: 200px;
background: gold;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="div">
</div>
<div id="div2"></div>
<script>
window.onload=function(){
var div=document.getElementById("div");
div.onmousedown=function(ev){
var e=window.event || ev;
//var Mydiv=document.getElementById("div");
//獲取到鼠標(biāo)點(diǎn)擊的位置距離div左側(cè)和頂部邊框的距離；
var oX=e.clientX-div.offsetLeft;
var oY=e.clientY-div.offsetTop;
//當(dāng)鼠標(biāo)移動(dòng)，把鼠標(biāo)的偏移量付給div
document.onmousemove=function(ev){
//計(jì)算出鼠標(biāo)在XY方向上移動(dòng)的偏移量，把這個(gè)偏移量加給DIV的左邊距和上邊距，div就會(huì)跟著移動(dòng)
var e=window.event|| ev;
div.style.left=e.clientX-oX+"px";
div.style.top=e.clientY-oY+"px";
}
//當(dāng)鼠標(biāo)按鍵抬起，清除移動(dòng)事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
var div2=document.getElementById("div2");
div2.onmousedown=function(ev){
var e=window.event || ev;
//var Mydiv=document.getElementById("div");
//獲取到鼠標(biāo)點(diǎn)擊的位置距離div左側(cè)和頂部邊框的距離；
var oX=e.clientX-div2.offsetLeft;
var oY=e.clientY-div2.offsetTop;
//當(dāng)鼠標(biāo)移動(dòng)，把鼠標(biāo)的偏移量付給div
document.onmousemove=function(ev){
//計(jì)算出鼠標(biāo)在XY方向上移動(dòng)的偏移量，把這個(gè)偏移量加給DIV的左邊距和上邊距，div就會(huì)跟著移動(dòng)
var e=window.event|| ev;
div2.style.left=e.clientX-oX+"px";
div2.style.top=e.clientY-oY+"px";
}
//當(dāng)鼠標(biāo)按鍵抬起，清除移動(dòng)事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
詳解如何在Javascript中使用Object.freeze()
這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
本文主要介紹了canvas實(shí)現(xiàn)愛心和彩虹雨效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
JavaScript設(shè)計(jì)模式之單例模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之單例模式實(shí)例,本文用一個(gè)實(shí)際例子講解JavaScript中的單例模式,需要的朋友可以參考下2014-09-09
刷新頁面實(shí)現(xiàn)方式總結(jié)(HTML,ASP,JS)
多種方法實(shí)現(xiàn)頁面的刷新代碼2008-11-11
javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法
這篇文章主要介紹了javascript設(shè)置連續(xù)兩次點(diǎn)擊按鈕時(shí)間間隔的方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
js每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)
下面小編就為大家?guī)硪黄猨s每隔兩秒輸出數(shù)組中的一項(xiàng)(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁功能(ajax異步)
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁功能、異步加載，表格渲染，含條件查詢，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁面的方法
這篇文章主要介紹了js與css實(shí)現(xiàn)彈出層覆蓋整個(gè)頁面的方法,分別以實(shí)例形式展示了彈出層覆蓋整個(gè)頁面的css樣式與js控制的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-12-12 
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)階段總結(jié)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06