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

效果图：

相关推荐：

textarea布局时文字在左下边且不能改变大小尺寸的解决

HTML中 table鼠标拖拽排序功能的实现

JavaScript鼠标拖拽事件实现的案例

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