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