本文描述了JS基于拖放改变对象大小的方法。分享给大家参考，如下：

拖放以更改对象大小功能：拖放小黄色div以更改大绿色div的宽度和高度

主要实现包括三个主要步骤：

1.凭身份证拿到大大小小的草皮。2.将onmousedown事件添加到小的div中。3.将onmousemove和onmouseup事件添加到onmousedown事件中的文档中

从分析图来看，我们只需要得到拖动时物体的递增宽度，问题就解决了

div id=' panel ' div id=' drag icon '/div/div添加一些样式

style # panel { position : absolute；宽度： 200 px；高度： 200 px；背景：绿色；} # Dragicon { position : absolute；bottom : 0；right : 0；宽度： 20px；height: 20px背景：黄色；}/stylejs实现代码：

脚本窗口。onload=function () {//1。获取两种尺寸的div var不透明=文档。getelementbyid(' panel ')；var oDragIcon=document . getelementbyid(' drag icon ')；//定义4个变量var disX=0；//按下鼠标时x值var disY=0；//按下鼠标时y值var DIsw=0；//拖动前div的宽度为var DisH=0；//拖动前面div的高度//3。添加点击事件odragicon。onmousedown=function(ev){ var ev=ev | | window . event to small div；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 . client x-DIsX DIsw；var H=ev . clienty-DIsy DisH；if(W100){ W=100；} if(W800){ W=800；} if(H100){ H=100；} if(H500){ H=500；} Opanel . style . width=W ' px '；//被拖动对象的宽度Opanel . style . height=H ' px '；//被拖动对象的高度} document . onmouseup=function(){ document . onmousemove=null；document.onmouseup=null} } }/脚本渲染：

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。