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实现图片轮播效果代码
Sep 03 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
Javascript动画效果(1)
Oct 11 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
Terran兵种介绍
2020/03/14 星际争霸
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
php4的彩蛋
2006/10/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
给Python入门者的一些编程建议
2015/06/15 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python批量生成条形码的示例
2020/10/10 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
.NET面试问题集
2015/12/08 面试题
党员自我评价分享
2013/12/13 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
简历的自我评价
2014/02/03 职场文书
幼儿园老师寄语
2014/04/03 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
趣味运动会标语口号
2015/12/26 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android