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

發(fā)布時(shí)間：2020-10-13 00:59:34 來(lái)源：腳本之家閱讀：292 作者：xiaoba_598 欄目：web開(kāi)發(fā)

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

盒子拖拽—運(yùn)用到的有onmousedown事件，onmousemove事件以及onmouseup事件

1、當(dāng)鼠標(biāo)點(diǎn)擊下去的時(shí)候我們需要獲取鼠標(biāo)所在位置的橫縱坐標(biāo)，然后獲取盒子的離頁(yè)面的橫縱方向的距離
2、計(jì)算出鼠標(biāo)相對(duì)盒子的距離
3、當(dāng)鼠標(biāo)移動(dòng)的時(shí)候，獲取鼠標(biāo)移動(dòng)的距離，在永鼠標(biāo)此刻的位置減去鼠標(biāo)相對(duì)盒子的距離，獲得的是盒子此刻的坐標(biāo)位置
4、將這個(gè)位置賦值給盒子
5、鼠標(biāo)抬起，清除鼠標(biāo)移動(dòng)事件；

代碼：

<!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>鼠標(biāo)拖拽</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，因?yàn)镮E中事件對(duì)象是作為全局對(duì)象( window.event )存在的；
     var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
     var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
     //獲取鼠標(biāo)相對(duì)盒子的位置；
     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;
      //將鼠標(biāo)當(dāng)前的坐標(biāo)值減去鼠標(biāo)相對(duì)盒子的位置，得到盒子當(dāng)時(shí)的位置并將其賦值給盒子，實(shí)現(xiàn)移動(dòng)效果
      box.style.left = pageX - boxX +'px';
      box.style.top = pageY - boxY + 'px';
     }
    };
    document.onmouseup = function () {
     //清除盒子的移動(dòng)事件;
     document.onmousemove = null;
    };
   } ;
   drag(box)
  }
 </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽