欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用JavaScript實(shí)現(xiàn)拖拽改變元素大小

 更新時間：2016年12月14日 14:25:47   作者：老板丶魚丸粗面  
本文主要介紹了JavaScript實(shí)現(xiàn)拖拽改變元素大小的原理及具體實(shí)例分析，具有很好的參考價值，需要的朋友一起來看下吧

大致介紹

拖拽改變元素大小是在模擬拖拽上增加了一些功能

拖拽改變元素大小原理

首先這個方塊得知道我們想要改變這個它的大小，所以我給它設(shè)定一個范圍，當(dāng)點(diǎn)擊這個范圍時表明我們想要改變它的大小

當(dāng)我們點(diǎn)擊方塊的這些紅色區(qū)域時，方快就知道我們想要改變它的大小

代碼實(shí)現(xiàn)：

// 獲取event對象，兼容性寫法
      var ev = ev || event;
      // 鼠標(biāo)按下時的位置
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // 方塊上下左右四個邊的位置和方塊的長寬
      var T0 = this.offsetTop;
      var B0 = this.offsetTop + this.offsetHeight;
      var L0 = this.offsetLeft;
      var R0 = this.offsetLeft + this.offsetWidth;
      var W = this.offsetWidth;
      var H = this.offsetHeight;
      // 設(shè)置方塊的識別范圍
      var areaT = T0 + 10;
      var areaB = B0 - 10;
      var areaL = L0 + 10;
      var areaR = R0 - 10;

其中areaT、areaB、areaL、areaR就是紅色的區(qū)域

接下來方塊知道我們想要改變它的大小了，但是要怎么改變，朝哪種方向改變大小。所以要判斷改變大小的方向

代碼實(shí)現(xiàn)：

// 判斷改變方塊的大小的方向
      // 左
      var changeL = mouseDownX < areaL;
      // 右
      var changeR = mouseDownX > areaR;
      // 上
      var changeT = mouseDownY < areaT;
      // 下
      var changeB = mouseDownY > areaB;

接下來就是最重要的改變樣式了

代碼實(shí)現(xiàn)：

//根據(jù)改變方塊大小的方向不同進(jìn)行大小的改變
        // 左
        if(changeL){
          oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
          oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
        }
        // 右
        if(changeR){
          oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
        }
        // 上
        if(changeT){
          oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
          oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
        }
        // 下
        if(changeB){
          oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
        }

注意：在改變左側(cè)和上側(cè)時要同時修改方塊的位置，不然會出現(xiàn)拖左側(cè)邊而右側(cè)邊位置擴(kuò)大的現(xiàn)象（拖動上側(cè)邊下側(cè)邊位置變大）

代碼優(yōu)化

未優(yōu)化前的代碼：

var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev){
      // 獲取event對象，兼容性寫法
      var ev = ev || event;
      // 鼠標(biāo)按下時的位置
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // 方塊上下左右四個邊的位置和方塊的長寬
      var T0 = this.offsetTop;
      var B0 = this.offsetTop + this.offsetHeight;
      var L0 = this.offsetLeft;
      var R0 = this.offsetLeft + this.offsetWidth;
      var W = this.offsetWidth;
      var H = this.offsetHeight;
      // 設(shè)置方塊的識別范圍
      var areaT = T0 + 10;
      var areaB = B0 - 10;
      var areaL = L0 + 10;
      var areaR = R0 - 10;
      // 判斷改變方塊的大小的方向
      // 左
      var changeL = mouseDownX < areaL;
      // 右
      var changeR = mouseDownX > areaR;
      // 上
      var changeT = mouseDownY < areaT;
      // 下
      var changeB = mouseDownY > areaB;
      oDiv.onmousemove = function(ev){
        var ev = ev || event;
        // 鼠標(biāo)移動時的鼠標(biāo)位置
        var mouseMoveX = ev.clientX;
        var mouseMoveY = ev.clientY;
        //根據(jù)改變方塊大小的方向不同進(jìn)行大小的改變
        // 左
        if(changeL){
          oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
          oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
        }
        // 右
        if(changeR){
          oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
        }
        // 上
        if(changeT){
          oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
          oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
        }
        // 下
        if(changeB){
          oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
        }
        // 限定范圍
        if(parseInt(oDiv.style.width) < 50){
          oDiv.style.width = 50 + 'px';
        }
        if(parseInt(oDiv.style.height) < 50){
          oDiv.style.height = 50 + 'px';
        }
      }
      oDiv.onmouseup = function(){
        oDiv.onmousemove = null;
      }
    }

這段代碼現(xiàn)在主要有兩個問題：

1、當(dāng)鼠標(biāo)移動過快移出方塊時，就不能夠繼續(xù)改變元素的大小了

　 解決方案：把onmousemove事件和onmouseup事件綁定到document對象上

2、當(dāng)方塊中有文字時，拖拽改變方塊大小時會觸發(fā)瀏覽器默認(rèn)的原生拖放行為

　 解決方案：1、阻止瀏覽器的默認(rèn)行為（IE8瀏覽器除外）

　　　　　　　  在onmousedown中添加語句 return false

　　　　　　2、設(shè)置全局捕獲（IE8）

　　　　　　　  在onmousedown中設(shè)置全局捕獲

　　　　　　　  在onmouseup中取消全局捕獲　

優(yōu)化后的代碼：

<div id="div1">adfadsf</div>
  <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev){
      // 獲取event對象，兼容性寫法
      var ev = ev || event;
      // 鼠標(biāo)按下時的位置
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // 方塊上下左右四個邊的位置和方塊的長寬
      var T0 = this.offsetTop;
      var B0 = this.offsetTop + this.offsetHeight;
      var L0 = this.offsetLeft;
      var R0 = this.offsetLeft + this.offsetWidth;
      var W = this.offsetWidth;
      var H = this.offsetHeight;
      // 設(shè)置方塊的識別范圍
      var areaT = T0 + 10;
      var areaB = B0 - 10;
      var areaL = L0 + 10;
      var areaR = R0 - 10;
      // 判斷改變方塊的大小的方向
      // 左
      var changeL = mouseDownX < areaL;
      // 右
      var changeR = mouseDownX > areaR;
      // 上
      var changeT = mouseDownY < areaT;
      // 下
      var changeB = mouseDownY > areaB;
      // IE8 取消默認(rèn)行為-設(shè)置全局捕獲
      if(oDiv.setCapture){
        oDiv.setCapture();
      }
      document.onmousemove = function(ev){
        var ev = ev || event;
        // 鼠標(biāo)移動時的鼠標(biāo)位置
        var mouseMoveX = ev.clientX;
        var mouseMoveY = ev.clientY;
        //根據(jù)改變方塊大小的方向不同進(jìn)行大小的改變
        // 左
        if(changeL){
          oDiv.style.width = (mouseDownX - mouseMoveX) + W + 'px';
          oDiv.style.left = L0 - (mouseDownX - mouseMoveX) + 'px';
        }
        // 右
        if(changeR){
          oDiv.style.width = (mouseMoveX - mouseDownX) + W + 'px';
        }
        // 上
        if(changeT){
          oDiv.style.height = (mouseDownY - mouseMoveY) + H + 'px';
          oDiv.style.top = T0 - (mouseDownY - mouseMoveY) + 'px';
        }
        // 下
        if(changeB){
          oDiv.style.height = (mouseMoveY - mouseDownY) + H +'px';
        }
        // 限定范圍
        if(parseInt(oDiv.style.width) < 50){
          oDiv.style.width = 50 + 'px';
        }
        if(parseInt(oDiv.style.height) < 50){
          oDiv.style.height = 50 + 'px';
        }
      }
      document.onmouseup = function(){
        document.onmousemove = null;
        // 釋放全局捕獲
        if(oDiv.releaseCapture){
          oDiv.releaseCapture();
        }
      }
      return false;
    }

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

最新評論