本文實例講述了JS實現基于拖拽改變物體大小的方法。分享給大家供大家參考，具體如下：
拖拽改變物體大小功能：拖拽黃色小div來改變綠色大div的寬和高
主要實現由三大步:
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實現代碼：
<script> window.onload = function () { // 1. 獲取兩個大小div var oPanel = document.getElementById('panel'); var oDragIcon = document.getElementById('dragIcon'); // 定義4個變量 var disX = 0;//鼠標按下時光標的X值 var disY = 0;//鼠標按下時光標的Y值 var disW = 0; //拖拽前div的寬 var disH = 0; // 拖拽前div的高 //3. 給小div加點擊事件 oDragIcon.onmousedown = function (ev) { var ev = ev || window.event; disX = ev.clientX; // 獲取鼠標按下時光標x的值 disY = ev.clientY; // 獲取鼠標按下時光標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>效果圖：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript中json操作技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
