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

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

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

大致介紹

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

拖拽改變元素大小原理

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

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

代碼實現(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ū)域

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

代碼實現(xiàn):

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

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

代碼實現(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)文章

最新評論