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

效果图：

以上就是本篇文章的所有内容，希望对大家学习提供到帮助！！

相关推荐：

javaScript封装的各种写法

带你快速理解javascript中的事件模型

JavaScript观察者模式实例详解

以上就是JS实现基于拖拽改变物体大小的方法的详细内容，更多请关注Gxl网其它相关文章！