利用JavaScript實現(xiàn)拖拽改變元素大小
更新時間：2016年12月14日 14:25:47 作者：老板丶魚丸粗面
本文主要介紹了JavaScript實現(xiàn)拖拽改變元素大小的原理及具體實例分析，具有很好的參考價值，需要的朋友一起來看下吧
大致介紹
拖拽改變元素大小是在模擬拖拽上增加了一些功能
拖拽改變元素大小原理
首先這個方塊得知道我們想要改變這個它的大小，所以我給它設定一個范圍，當點擊這個范圍時表明我們想要改變它的大小
當我們點擊方塊的這些紅色區(qū)域時，方快就知道我們想要改變它的大小
代碼實現(xiàn)：
// 獲取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就是紅色的區(qū)域
接下來方塊知道我們想要改變它的大小了，但是要怎么改變，朝哪種方向改變大小。所以要判斷改變大小的方向
代碼實現(xiàn)：
// 判斷改變方塊的大小的方向
// 左
var changeL = mouseDownX < areaL;
// 右
var changeR = mouseDownX > areaR;
// 上
var changeT = mouseDownY < areaT;
// 下
var changeB = mouseDownY > areaB;
接下來就是最重要的改變樣式了
代碼實現(xiàn)：
//根據(jù)改變方塊大小的方向不同進行大小的改變
// 左
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';
}
注意：在改變左側和上側時要同時修改方塊的位置，不然會出現(xiàn)拖左側邊而右側邊位置擴大的現(xiàn)象（拖動上側邊下側邊位置變大）
代碼優(yōu)化
未優(yōu)化前的代碼：
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;
//根據(jù)改變方塊大小的方向不同進行大小的改變
// 左
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、當鼠標移動過快移出方塊時，就不能夠繼續(xù)改變元素的大小了
解決方案：把onmousemove事件和onmouseup事件綁定到document對象上
2、當方塊中有文字時，拖拽改變方塊大小時會觸發(fā)瀏覽器默認的原生拖放行為
解決方案：1、阻止瀏覽器的默認行為（IE8瀏覽器除外）
在onmousedown中添加語句 return false
2、設置全局捕獲（IE8）
在onmousedown中設置全局捕獲
在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;
// 鼠標按下時的位置
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;
//根據(jù)改變方塊大小的方向不同進行大小的改變
// 左
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)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
下面小編就為大家?guī)硪黄狫S處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
UEditor 自定義圖片視頻尺寸校驗功能的實現(xiàn)代碼
UEditor支持單圖、多圖以及視頻上傳，編輯器配置項支持文件格式、文件大小校驗，對于文件寬高尺寸校驗暫不支持。本文給大家介紹UEditor 自定義圖片視頻尺寸校驗功能的實現(xiàn)代碼，感興趣的朋友一起看看吧2020-10-10
這篇文章主要為大家詳細介紹了簡單的js表格操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了JavaScript高級程序設計（第三版）學習筆記1~5章 的相關資料,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細介紹了js鼠標跟隨運動效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JS圖片無縫、平滑滾動的實現(xiàn),需要的朋友可以參考下2014-03-03![javascript入門之數(shù)組[新手必看]](http://img.jbzj.com/images/xgimg/bcimg6.png)
本文介紹了javascript 數(shù)組的定義和數(shù)組元素的操作，ECMAScript中的數(shù)組方法...希望對大家有所幫助2016-11-11
JavaScript手寫數(shù)組的常用函數(shù)總結
這篇文章主要給大家介紹了關于JavaScript手寫數(shù)組常用函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
xmlHTTP返回值重編碼的優(yōu)化...2006-11-11
這篇文章主要為大家介紹了JavaScript快速排序算法不同版本原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08