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