js實現(xiàn)鼠標(biāo)拖動功能
更新時間：2017年03月20日 11:58:26 作者：18301695170
本文主要介紹了js實現(xiàn)鼠標(biāo)拖動功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!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)點擊的位置距離div左側(cè)和頂部邊框的距離；
var oX=e.clientX-div.offsetLeft;
var oY=e.clientY-div.offsetTop;
//當(dāng)鼠標(biāo)移動，把鼠標(biāo)的偏移量付給div
document.onmousemove=function(ev){
//計算出鼠標(biāo)在XY方向上移動的偏移量，把這個偏移量加給DIV的左邊距和上邊距，div就會跟著移動
var e=window.event|| ev;
div.style.left=e.clientX-oX+"px";
div.style.top=e.clientY-oY+"px";
}
//當(dāng)鼠標(biāo)按鍵抬起，清除移動事件
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)點擊的位置距離div左側(cè)和頂部邊框的距離；
var oX=e.clientX-div2.offsetLeft;
var oY=e.clientY-div2.offsetTop;
//當(dāng)鼠標(biāo)移動，把鼠標(biāo)的偏移量付給div
document.onmousemove=function(ev){
//計算出鼠標(biāo)在XY方向上移動的偏移量，把這個偏移量加給DIV的左邊距和上邊距，div就會跟著移動
var e=window.event|| ev;
div2.style.left=e.clientX-oX+"px";
div2.style.top=e.clientY-oY+"px";
}
//當(dāng)鼠標(biāo)按鍵抬起，清除移動事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)電商商品展示放大鏡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
如何在JavaScript實現(xiàn)Blob文件流下載
在JavaScript中可以使用瀏覽器提供的Blob對象和URL.createObjectURL()方法來實現(xiàn)文件流下載,這篇文章主要給大家介紹了關(guān)于如何在JavaScript實現(xiàn)Blob文件流下載的相關(guān)資料,需要的朋友可以參考下2024-05-05
預(yù)防內(nèi)存泄漏2008-03-03
微信小程序?qū)崿F(xiàn)分類菜單激活狀態(tài)隨列表滾動而自動切換效果詳解
這篇文章主要介紹了微信小程序分類菜單激活狀態(tài)跟隨列表滾動自動切換，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
一般來說，我們判斷 iframe 是否加載完成其實與 判斷JavaScript 文件是否加載完成 采用的方法很類似2010-01-01
javascript?變量聲明?var,let,const?的區(qū)別
這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明，每種編程語言必不可少的語法，在javascript中，變量的聲明相對其他語言來說，算是比較簡單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下2022-06-06
table insertRow、deleteRow定義和用法總結(jié)
這篇文章主要對table insertRow、deleteRow定義和用法做下總結(jié),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了微信小程序的線程架構(gòu)，每個小程序包含一個描述整體程序的app實例和多個描述頁面的page，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了WebView啟動支付寶客戶端支付失敗的問題小結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
基于Ionic3實現(xiàn)選項卡切換并重新加載echarts
這篇文章主要介紹了基于Ionic3實現(xiàn)選項卡切換并重新加載echarts,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09