利用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)文章
JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
下面小編就為大家?guī)硪黄狫S處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10UEditor 自定義圖片視頻尺寸校驗功能的實現(xiàn)代碼
UEditor支持單圖、多圖以及視頻上傳,編輯器配置項支持文件格式、文件大小校驗,對于文件寬高尺寸校驗暫不支持。本文給大家介紹UEditor 自定義圖片視頻尺寸校驗功能的實現(xiàn)代碼,感興趣的朋友一起看看吧2020-10-10JavaScript高級程序設(shè)計(第三版)學(xué)習(xí)筆記1~5章
這篇文章主要介紹了JavaScript高級程序設(shè)計(第三版)學(xué)習(xí)筆記1~5章 的相關(guān)資料,需要的朋友可以參考下2016-03-03javascript入門之?dāng)?shù)組[新手必看]
本文介紹了javascript 數(shù)組的定義和數(shù)組元素的操作,ECMAScript中的數(shù)組方法...希望對大家有所幫助2016-11-11JavaScript手寫數(shù)組的常用函數(shù)總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript手寫數(shù)組常用函數(shù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11