js如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能

這篇文章將為大家詳細(xì)講解有關(guān)js如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注于旬陽(yáng)企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),購(gòu)物商城網(wǎng)站建設(shè)。旬陽(yáng)網(wǎng)站建設(shè)公司,為旬陽(yáng)等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

效果圖：

代碼如下：

<!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>

關(guān)于“js如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

名稱欄目：js如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
文章網(wǎng)址：http://m.rwnh.cn/article24/igjgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站內(nèi)鏈、ChatGPT、品牌網(wǎng)站建設(shè)、企業(yè)建站、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

js如何實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能