JS实现拖拽改变物体大小

本文实例讲述了JS实现基于拖拽改变物体大小的方法。分享给大家供大家参考，具体如下：

拖拽改变物体大小功能：拖拽黄色小p来改变绿色大p的宽和高

主要实现由三大步:

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实现代码：

效果图：

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com