JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解

發(fā)布時(shí)間：2021-05-18 11:24:55 來(lái)源：億速云閱讀：165 作者：小新欄目：web開發(fā)

小編給大家分享一下JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

具體如下：

原始的面向過(guò)程代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #box {
        width: 100px; 
        height: 100px; 
        background: blue; 
        position: absolute;
      }
    </style>
    <title>拖拽</title>
    <script>
      var oBox=null;
      var disX=0;
      var disY=0;
      
      window.onload=function(){
        oBox=document.getElementById('box');
        
        oBox.onmousedown=fnDown;
      };
      //鼠標(biāo)按下事件
      function fnDown(ev){
        var oEvent = ev||event;
        disX = oEvent.clientX - oBox.offsetLeft;
        disY = oEvent.clientY - oBox.offsetTop;
        
        document.onmousemove = fnMove;
        document.onmouseup = fnUp;
      }
      //鼠標(biāo)移動(dòng)事件
      function fnMove(ev){
        var oEvent=ev||event;
        
        oBox.style.left = oEvent.clientX - disX + 'px';
        oBox.style.top = oEvent.clientY - disY + 'px';
      }
      //鼠標(biāo)抬起事件
      function fnUp(){
        document.onmousemove = null;
        document.onmouseup = null;
      }
    </script>
  </head>
 
<body>
  <div id="box"></div>
</body>
</html>

下面是面向?qū)ο蟮拇a

drag.js

/**
 * 拖拽
 * @param {Object} id div的id
 */
function Drag(id){
  this.oBox = document.getElementById(id);
  this.disX = 0;
  this.disY = 0;
  
  var _this = this;
  
  this.oBox.onmousedown = function(){
    _this.fnDown();
  }
}
//鼠標(biāo)按下
Drag.prototype.fnDown = function(ev){
  var oEvent = ev || event;
  
  this.disX = oEvent.clientX - this.oBox.offsetLeft;
  this.disY = oEvent.clientY - this.oBox.offsetTop;
  
  var _this = this;
  
  document.onmousemove = function(){
    _this.fnMove();
  };
  document.onmouseup = function(){
    _this.fnUp();
  };
}
//鼠標(biāo)移動(dòng)
Drag.prototype.fnMove = function(ev){
  var oEvent= ev || event;
  
  this.oBox.style.left = oEvent.clientX - this.disX + 'px';
  this.oBox.style.top = oEvent.clientY - this.disY + 'px';
}
//鼠標(biāo)抬起
Drag.prototype.fnUp = function(){
  document.onmousemove = null;
  document.onmouseup = null;
}

drag.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      div {
        position: absolute;
      }
    </style>
    <title>拖拽</title>
    <script type="text/javascript" src="../js/drag.js" ></script>
    <script>
      window.onload = function(){
        var drag1 = new Drag("box1");
        
        var drag1 = new Drag("box2");
      };
    </script>
  </head>
 
<body>
  <div id="box1" ></div>  
  <div id="box2" ></div>
</body>
</html>

JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解

此拖拽有一個(gè)問(wèn)題，就是沒(méi)有控制拖拽出邊界的問(wèn)題。但我們又不想去修改代碼，那我們?cè)趺醋?？學(xué)過(guò)java的應(yīng)該都知道可以寫一個(gè)子類來(lái)做一些更加具體的操作，又保留了父類的功能，就是繼承。

html

<script type="text/javascript" src="../js/drag.js" ></script>
<script type="text/javascript" src="../js/dragLimit.js" ></script>
<script>
  window.onload = function(){
     var drag1 = new Drag("box1");       
     var drag1 = new DragLimit("box2");//藍(lán)色是不會(huì)超出邊界的
  };
</script>
<body>
  <div id="box1" ></div>  
  <div id="box2" ></div>
</body>

DragLimit.js：DragLimit繼承自Drag，控制了不能出邊界

/**
 * 限制邊界的拖拽，繼承自Drag
 * @param {Object} id
 */
function DragLimit(id){
  Drag.call(this, id);
}
//繼承方法
for(var p in Drag.prototype){
  DragLimit.prototype[p] = Drag.prototype[p];
}
/**
 * 覆寫父類的鼠標(biāo)移動(dòng)方法，控制不能移出邊界
 */
DragLimit.prototype.fnMove = function(ev){
  var oEvent= ev || event;
  
  var left = oEvent.clientX - this.disX;
  var top = oEvent.clientY - this.disY;
  
  //控制邊界
  if(left < 0){
    left = 0;
  } else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
    left = document.documentElement.clientWidth-this.oBox.offsetWidth;
  }
  if(top <= 0){
    top = 0;
  } else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
    top = document.documentElement.clientHeight-this.oBox.offsetHeight;
  }
  
  this.oBox.style.left = left + 'px';
  this.oBox.style.top = top + 'px';
}

以上是“JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

JS面向?qū)ο缶幊虒?shí)現(xiàn)的拖拽功能案例詳解

猜你喜歡

最新資訊

相關(guān)推薦

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