利用JavaScript實(shí)現(xiàn)拖拽改變?cè)卮笮?/h1>

 更新時(shí)間：2016年12月14日 14:25:47   作者：老板丶魚丸粗面  

本文主要介紹了JavaScript實(shí)現(xiàn)拖拽改變?cè)卮笮〉脑砑熬唧w實(shí)例分析，具有很好的參考價(jià)值，需要的朋友一起來看下吧

大致介紹

拖拽改變?cè)卮笮∈窃谀M拖拽上增加了一些功能

拖拽改變?cè)卮笮≡?/strong>

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

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

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

// 獲取event對(duì)象，兼容性寫法
      var ev = ev || event;
      // 鼠標(biāo)按下時(shí)的位置
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // 方塊上下左右四個(gè)邊的位置和方塊的長寬
      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è)置方塊的識(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è)時(shí)要同時(shí)修改方塊的位置，不然會(huì)出現(xiàn)拖左側(cè)邊而右側(cè)邊位置擴(kuò)大的現(xiàn)象（拖動(dòng)上側(cè)邊下側(cè)邊位置變大）

代碼優(yōu)化

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

var oDiv = document.getElementById('div1');
    oDiv.onmousedown = function(ev){
      // 獲取event對(duì)象，兼容性寫法
      var ev = ev || event;
      // 鼠標(biāo)按下時(shí)的位置
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // 方塊上下左右四個(gè)邊的位置和方塊的長寬
      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è)置方塊的識(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)移動(dòng)時(shí)的鼠標(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)在主要有兩個(gè)問題：

1、當(dāng)鼠標(biāo)移動(dòng)過快移出方塊時(shí)，就不能夠繼續(xù)改變?cè)氐拇笮×?/strong>

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

2、當(dāng)方塊中有文字時(shí)，拖拽改變方塊大小時(shí)會(huì)觸發(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對(duì)象，兼容性寫法
      var ev = ev || event;
      // 鼠標(biāo)按下時(shí)的位置
      var mouseDownX = ev.clientX;
      var mouseDownY = ev.clientY;
      // 方塊上下左右四個(gè)邊的位置和方塊的長寬
      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è)置方塊的識(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)移動(dòng)時(shí)的鼠標(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)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

• vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單拖拽元素功能
• vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單的拖拽元素功能示例
• JavaScript實(shí)現(xiàn)拖拽元素對(duì)齊到網(wǎng)格（每次移動(dòng)固定距離）
• jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
• JavaScript實(shí)現(xiàn)拖拽網(wǎng)頁內(nèi)元素的方法
• javascript實(shí)現(xiàn)拖拽并替換網(wǎng)頁塊元素
• js實(shí)現(xiàn)拖拽元素選擇和刪除

• js
• 拖拽

相關(guān)文章

• 

  JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)

  下面小編就為大家?guī)硪黄狫S處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2017-10-10
• 

  UEditor 自定義圖片視頻尺寸校驗(yàn)功能的實(shí)現(xiàn)代碼

  UEditor支持單圖、多圖以及視頻上傳，編輯器配置項(xiàng)支持文件格式、文件大小校驗(yàn)，對(duì)于文件寬高尺寸校驗(yàn)暫不支持。本文給大家介紹UEditor 自定義圖片視頻尺寸校驗(yàn)功能的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧

  2020-10-10
• 

  簡單的js表格操作

  這篇文章主要為大家詳細(xì)介紹了簡單的js表格操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2016-09-09
• 

  JavaScript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記1~5章

  這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記1~5章 的相關(guān)資料,需要的朋友可以參考下

  2016-03-03
• 

  js鼠標(biāo)跟隨運(yùn)動(dòng)效果

  這篇文章主要為大家詳細(xì)介紹了js鼠標(biāo)跟隨運(yùn)動(dòng)效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2017-03-03
• 

  JS圖片無縫、平滑滾動(dòng)代碼

  這篇文章主要介紹了JS圖片無縫、平滑滾動(dòng)的實(shí)現(xiàn),需要的朋友可以參考下

  2014-03-03
• 

  javascript入門之?dāng)?shù)組[新手必看]

  本文介紹了javascript 數(shù)組的定義和數(shù)組元素的操作，ECMAScript中的數(shù)組方法...希望對(duì)大家有所幫助

  2016-11-11
• 

  JavaScript手寫數(shù)組的常用函數(shù)總結(jié)

  這篇文章主要給大家介紹了關(guān)于JavaScript手寫數(shù)組常用函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2020-11-11
• 

  xmlHTTP返回值重編碼的優(yōu)化

  xmlHTTP返回值重編碼的優(yōu)化...

  2006-11-11
• 

  JavaScript快速排序算法不同版本原理解析

  這篇文章主要為大家介紹了JavaScript快速排序算法不同版本原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

  2023-08-08

最新評(píng)論