DIV CSS 佈局教程網

大致介紹

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

拖拽改變元素大小原理

首先這個方塊得知道我們想要改變這個它的大小，所以我給它設定一個范圍，當點擊這個范圍時表明我們想要改變它的大小

當我們點擊方塊的這些紅色區域時，方快就知道我們想要改變它的大小

代碼實現：

// 獲取event對象，兼容性寫法
      var ev = ev || event;
      // 鼠標按下時的位置
      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;
      // 設置方塊的識別范圍
      var areaT = T0 + 10;
      var areaB = B0 - 10;
      var areaL = L0 + 10;
      var areaR = R0 - 10;

其中areaT、areaB、areaL、areaR就是紅色的區域

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

代碼實現：

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

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

代碼實現：

//根據改變方塊大小的方向不同進行大小的改變
        // 左
        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';
        }

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

代碼優化

未優化前的代碼：

var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev){
      // 獲取event對象，兼容性寫法
      var ev = ev || event;
      // 鼠標按下時的位置
      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;
      // 設置方塊的識別范圍
      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;
        // 鼠標移動時的鼠標位置
        var mouseMoveX = ev.clientX;
        var mouseMoveY = ev.clientY;
        //根據改變方塊大小的方向不同進行大小的改變
        // 左
        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;
      }
    }

這段代碼現在主要有兩個問題：

1、當鼠標移動過快移出方塊時，就不能夠繼續改變元素的大小了

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

2、當方塊中有文字時，拖拽改變方塊大小時會觸發浏覽器默認的原生拖放行為

　 解決方案：1、阻止浏覽器的默認行為（IE8浏覽器除外）

　　　　　　　  在onmousedown中添加語句 return false

　　　　　　2、設置全局捕獲（IE8）

　　　　　　　  在onmousedown中設置全局捕獲

　　　　　　　  在onmouseup中取消全局捕獲　

優化後的代碼：

<div id="div1">adfadsf</div>
  <script type="text/javascript">
    var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev){
      // 獲取event對象，兼容性寫法
      var ev = ev || event;
      // 鼠標按下時的位置
      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;
      // 設置方塊的識別范圍
      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 取消默認行為-設置全局捕獲
      if(oDiv.setCapture){
        oDiv.setCapture();
      }
      document.onmousemove = function(ev){
        var ev = ev || event;
        // 鼠標移動時的鼠標位置
        var mouseMoveX = ev.clientX;
        var mouseMoveY = ev.clientY;
        //根據改變方塊大小的方向不同進行大小的改變
        // 左
        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;
    }

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！