JS實現(xiàn)拖拽改變物體大小

本文實例講述了JS實現(xiàn)基于拖拽改變物體大小的方法。分享給大家供大家參考，具體如下：

拖拽改變物體大小功能：拖拽黃色小p來改變綠色大p的寬和高

主要實現(xiàn)由三大步:

1. 通過id獲取到大小兩個p
2. 給小p添加onmousedown事件
3. 在onmousedown事件給document添加onmousemove和onmouseup事件

由分析圖可知，我們只需要在拖拽的時候，獲取到物體不斷增加的寬度值，問題就解決了

<p id="panel">
 <p id="dragIcon"></p>
</p>

加些樣式

<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)代碼：

效果圖：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com