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打印网页部分内容的脚本
Nov 17 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
php绘制圆形的方法
2015/01/24 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
json跨域调用python的方法详解
2017/01/11 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
办公室文书岗位职责
2013/12/16 职场文书
工作中个人的自我评价
2013/12/31 职场文书
大班下学期个人总结
2015/02/13 职场文书
简历自我评价模板
2015/03/11 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
2019个人工作总结
2019/06/21 职场文书
Django实现翻页的示例代码
2021/05/24 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏