JS實(shí)現(xiàn)基于拖拽改變物體大小的方法
本文實(shí)例講述了JS實(shí)現(xiàn)基于拖拽改變物體大小的方法。分享給大家供大家參考,具體如下:
拖拽改變物體大小功能:拖拽黃色小div來(lái)改變綠色大div的寬和高
主要實(shí)現(xiàn)由三大步:
1. 通過(guò)id獲取到大小兩個(gè)div
2. 給小div添加onmousedown事件
3. 在onmousedown事件給document添加onmousemove和onmouseup事件
由分析圖可知,我們只需要在拖拽的時(shí)候,獲取到物體不斷增加的寬度值,問(wèn)題就解決了
<div id="panel"> <div id="dragIcon"></div> </div>
加些樣式
<style> #panel{ position: absolute; width: 200px;height: 200px; background: green; } #dragIcon{ position: absolute;bottom: 0;right: 0; width: 20px;height: 20px; background: yellow; } </style>
js實(shí)現(xiàn)代碼:
<script> window.onload = function () { // 1. 獲取兩個(gè)大小div var oPanel = document.getElementById('panel'); var oDragIcon = document.getElementById('dragIcon'); // 定義4個(gè)變量 var disX = 0;//鼠標(biāo)按下時(shí)光標(biāo)的X值 var disY = 0;//鼠標(biāo)按下時(shí)光標(biāo)的Y值 var disW = 0; //拖拽前div的寬 var disH = 0; // 拖拽前div的高 //3. 給小div加點(diǎn)擊事件 oDragIcon.onmousedown = function (ev) { var ev = ev || window.event; disX = ev.clientX; // 獲取鼠標(biāo)按下時(shí)光標(biāo)x的值 disY = ev.clientY; // 獲取鼠標(biāo)按下時(shí)光標(biāo)Y的值 disW = oPanel.offsetWidth; // 獲取拖拽前div的寬 disH = oPanel.offsetHeight; // 獲取拖拽前div的高 document.onmousemove = function (ev) { var ev = ev || window.event; //拖拽時(shí)為了對(duì)寬和高 限制一下范圍,定義兩個(gè)變量 var W = ev.clientX - disX + disW; var H = ev.clientY - disY + disH; if(W<100){ W = 100; } if(W>800){ W =800; } if(H<100){ H = 100; } if(H>500){ H = 500; } oPanel.style.width =W +'px';// 拖拽后物體的寬 oPanel.style.height = H +'px';// 拖拽后物體的高 } document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } } } </script>
效果圖:
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車(chē)功能示例【附源碼下載】
- AngularJS實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
- 使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件
- js實(shí)現(xiàn)QQ面板拖拽效果(慕課網(wǎng)DOM事件探秘)(全)
- js實(shí)現(xiàn)鼠標(biāo)拖拽多選功能示例
- js實(shí)現(xiàn)拖拽上傳圖片功能
- 完美實(shí)現(xiàn)js拖拽效果 return false用法詳解
- 簡(jiǎn)單實(shí)現(xiàn)js拖拽效果
- 基于AngularJS的拖拽文件上傳的實(shí)例代碼
- Java實(shí)現(xiàn)拖拽文件上傳dropzone.js的簡(jiǎn)單使用示例代碼
- JS實(shí)現(xiàn)簡(jiǎn)單拖拽效果
- JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a
- js實(shí)現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能
相關(guān)文章
Javascript new關(guān)鍵字的玄機(jī) 以及其它
本人是Javascript菜鳥(niǎo),下面是前幾天學(xué)習(xí)Javascript的旅程心得,希望對(duì)和我一樣的入門(mén)者有點(diǎn)用,也希望高手批評(píng)指正。2010-08-08JavaScript sort數(shù)組排序方法和自我實(shí)現(xiàn)排序方法小結(jié)
這篇文章主要介紹了JavaScript sort數(shù)組排序方法和自我實(shí)現(xiàn)排序方法小結(jié)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06js中通過(guò)getElementsByName訪問(wèn)name集合對(duì)象的方法
下面小編就為大家?guī)?lái)一篇js中通過(guò)getElementsByName訪問(wèn)name集合對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10JS 文字符串轉(zhuǎn)換unicode編碼函數(shù)
AJAX傳遞中文字符串時(shí)必須把中文字符串編碼成unicode,一般會(huì)用到JS的自帶函數(shù)escape().不過(guò)找到了更好的函數(shù)來(lái)確決中文字符轉(zhuǎn)換成unicode編碼的函數(shù)2009-05-05淺析Javascript中“==”與“===”的區(qū)別
這篇文章主要介紹了淺析Javascript中“==”與“===”的區(qū)別,非常的全面,這里推薦給小伙伴們2014-12-12