JavaScript實現(xiàn)拖拽功能

更新時間：2020年02月11日 09:40:21 作者：xiaoba_598

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)拖拽功能的具體代碼，供大家參考，具體內(nèi)容如下

盒子拖拽—運用到的有onmousedown事件，onmousemove事件以及onmouseup事件

1、當鼠標點擊下去的時候我們需要獲取鼠標所在位置的橫縱坐標，然后獲取盒子的離頁面的橫縱方向的距離
2、計算出鼠標相對盒子的距離
3、當鼠標移動的時候，獲取鼠標移動的距離，在永鼠標此刻的位置減去鼠標相對盒子的距離，獲得的是盒子此刻的坐標位置
4、將這個位置賦值給盒子
5、鼠標抬起，清除鼠標移動事件；

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>鼠標拖拽</title>
 <style>
  .box{
   background-color: pink;
   width:200px;
   height:200px;
   border-radius: 50%;
   position: absolute;
   top:20px;
   left:100px;
  }
 </style>
</head>
<body>
 <div class="box">

 </div>
 <script>
  window.onload = function(){
   var box = document.getElementsByClassName('box')[0];
   function drag (ele){
    ele.onmousedown = function(e){
     var e = e || window.event; 
     //此處是為了兼容IE，因為IE中事件對象是作為全局對象( window.event )存在的；
     var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
     var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
     //獲取鼠標相對盒子的位置；
     var boxX = pageX - box.offsetLeft;
     var boxY = pageY - box.offsetTop;
     document.onmousemove = function(e){
      var e = e || window.event;
      var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
      var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
      //將鼠標當前的坐標值減去鼠標相對盒子的位置，得到盒子當時的位置并將其賦值給盒子，實現(xiàn)移動效果
      box.style.left = pageX - boxX +'px';
      box.style.top = pageY - boxY + 'px';
     }
    };
    document.onmouseup = function () {
     //清除盒子的移動事件;
     document.onmousemove = null;
    };
   } ;
   drag(box)
  }
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: