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客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
基于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
PHP return语句的另一个作用
2014/07/30 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
php7性能提升的原因详解
2019/10/13 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python continue语句用法实例
2014/03/11 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
python实现整数的二进制循环移位
2019/03/08 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
django 取消csrf限制的实例
2020/03/13 Python
python实现简单学生信息管理系统
2020/04/09 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
工程造价专业大学生自荐信
2013/10/01 职场文书
一年级家长会邀请函
2014/01/25 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
捐助感谢信
2015/01/22 职场文书
2015年党建工作总结
2015/03/30 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
python数字图像处理:图像简单滤波
2022/06/28 Python