JS实现基于拖拽改变物体大小的方法


Posted in Javascript onJanuary 23, 2018

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

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

JS实现基于拖拽改变物体大小的方法

主要实现由三大步:

1. 通过id获取到大小两个div
2. 给小div添加onmousedown事件
3. 在onmousedown事件给document添加onmousemoveonmouseup事件

JS实现基于拖拽改变物体大小的方法

由分析图可知,我们只需要在拖拽的时候,获取到物体不断增加的宽度值,问题就解决了

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

加些样式

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

<script>
  window.onload = function () {
    // 1. 获取两个大小div
    var oPanel = document.getElementById('panel');
    var oDragIcon = document.getElementById('dragIcon');
    // 定义4个变量
    var disX = 0;//鼠标按下时光标的X值
    var disY = 0;//鼠标按下时光标的Y值
    var disW = 0; //拖拽前div的宽
    var disH = 0; // 拖拽前div的高
    //3. 给小div加点击事件
    oDragIcon.onmousedown = function (ev) {
      var ev = ev || window.event;
      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.clientX - disX + disW;
        var H = ev.clientY - disY + disH;
        if(W<100){
          W = 100;
        }
        if(W>800){
          W =800;
        }
        if(H<100){
          H = 100;
        }
        if(H>500){
          H = 500;
        }
        oPanel.style.width =W +'px';// 拖拽后物体的宽
        oPanel.style.height = H +'px';// 拖拽后物体的高
      }
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
  }
</script>

效果图:

JS实现基于拖拽改变物体大小的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
基于vue cli重构多页面脚手架过程详解
Jan 23 #Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 #Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 #Javascript
从parcel.js打包出错到选择nvm的全部过程
Jan 23 #Javascript
浅谈vue项目重构技术要点和总结
Jan 23 #Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 #Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php实现记事本案例
2020/10/20 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
javascript控制台详解
2015/06/25 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
python分布式编程实现过程解析
2019/11/08 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
python使用列表的最佳方案
2020/08/12 Python
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
家庭困难证明
2014/10/12 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
编写python程序的90条建议
2021/04/14 Python