JavaScript实现拖拽和缩放效果


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了JavaScript实现拖拽和缩放效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>拖拽缩放</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
  * {
    margin: 0;
    padding: 0
  }

  #box {
    width: 100%;
    height: 100%;
    position: relative;
    background: #4bb0bb
  }

  #drag {
    width: 200px;
    height: 200px;
    position: relative;
    background: #691fff;
    cursor: move;
  }

  #scale {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #ffa500;
    cursor: se-resize;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }
</style>

<body>
  <div id="box">
    <div id="drag">
      <div id="scale"></div>
    </div>
  </div>
</body>
<script>

  window.onload = function () {
    var box = document.getElementById("box")
    var drag = document.getElementById("drag")
    var scale = document.getElementById("scale")
    // mousedown mousemove mouseup
    dragTool(drag)
    scaleTool(drag, scale, box)
    // 拖拽方法
    function dragTool(node) {
      node.onmousedown = function (ev) {
        // 浏览器兼容处理
        var e = ev || window.event;
        // 鼠标按下记录相对位置
        // 水平方向都距离 = 当前鼠标左边的距离 - 被拖拽元素距离左边的距离
        var offsetX = e.clientX - node.offsetLeft;
        // 垂直方向都距离 = 当前鼠标都上边的距离 - 被拖拽元素距离距离的距离
        var offsetY = e.clientY - node.offsetTop;
        // 鼠标移动和被拖拽的元素是相对的 这里是鼠标拖拽的物体在整个页面上移动 所以
        // move加在document上
        document.onmousemove = function (ev) {
          // 当前鼠标的事件对象
          var e = ev || window.event;
          // 定义 currentLeft = 当前鼠标位置 - 距离左边的距离
          var currentLeft = e.clientX - offsetX;
          // 定义 currentTop = 当前鼠标上边位置 - 距离上边的距离
          var currentTop = e.clientY - offsetY
          // 限制左出界 最左是 0 
          if (currentLeft <= 0) {
            currentLeft = 0;
          }
          // 当前窗口的宽 浏览器兼容
          var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
          // 限制右边出界 如果大于当前窗口的宽 那么就让它等于当前窗口的宽减去当前元素的offsetWidth 也就是留在原地
          if (currentLeft >= windowWidth - node.offsetWidth) {
            currentLeft = windowWidth - node.offsetWidth;
          }
          // 设置上出界 最上边是 0 
          if (currentTop <= 0) {
            currentTop = 0;
          }
          // 当前窗口的高 浏览器兼容
          var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
          // 限制下边出界 如果大于当前窗口的高 减去 本身的高 那么就让它等于 当前窗口的高减去本身的高
          if (currentTop >= windowHeight - node.offsetHeight) {
            currentTop = windowHeight - node.offsetHeight;
          }
          // 当前被拖拽元素的 left 值 等于上面计算出的 currentLeft
          node.style.left = currentLeft + 'px';
          // 当前被拖拽元素的 top 值 等于上面计算出的 currentTop
          node.style.top = currentTop + 'px';
        }
      }
      // 鼠标弹起取消拖拽 这里添加到 node 元素对象也可以的
      document.onmouseup = function () {
        document.onmousemove = null;
      }
    }

    // 缩放
    function scaleTool(drag, scale, box) {
      scale.onmousedown = function (e) {
        //阻止冒泡 避免缩放触发移动事件
        e.stopPropagation()
        // 取消事件的默认动作
        e.preventDefault()
        // 定义position
        var position = {
          'w': drag.offsetWidth, // 被缩放元素的offsetWidth
          'h': drag.offsetHeight, // 被缩放元素的offsetHeight
          'x': e.clientX, // 当前窗口鼠标指针的水平坐标
          'y': e.clientY, // 当前窗口鼠标指针的垂直坐标
        }
        drag.onmousemove = function (ev) {
          ev.preventDefault()
          // 设置最大缩放为30*30 Math.max取最大值 
          var w = Math.max(30, ev.clientX - position.x + position.w)
          var h = Math.max(30, ev.clientY - position.y + position.h)

          // 设置最大的宽高
          w = w >= box.offsetWidth - drag.offsetLeft ? box.offsetWidth - drag.offsetLeft : w;
          h = h >= box.offsetHeight - drag.offsetTop ? box.offsetHeight - drag.offsetTop : h;
          drag.style.width = w + 'px';
          drag.style.height = h + 'px';
        }
        // 鼠标离开和抬起取消缩放
        drag.onmouseup = function () {
          drag.onmousemove = null;
          drag, onmouseup = null;
        }
        drag.onmouseleave = function () {
          drag.onmousemove = null;
          drag, onmouseup = null;
        }
      }
    }
  }

</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js计算页面刷新的次数
Jul 20 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 #jQuery
JavaScript实现矩形块大小任意缩放
Aug 25 #Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 #Javascript
JS实现按比例缩小图片宽高
Aug 24 #Javascript
JS实现简易贪吃蛇游戏
Aug 24 #Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 #Javascript
Node.js 中判断一个文件是否存在
Aug 24 #Javascript
You might like
php.ini中文版
2006/10/09 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Django入门使用示例
2017/12/12 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
详解python变量与数据类型
2020/08/25 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
个人简历自我评价八例
2013/10/31 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
安全生产承诺书
2014/03/26 职场文书
化学专业自荐信
2014/05/28 职场文书
户籍证明模板
2014/09/28 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
个园导游词
2015/02/04 职场文书
社区重阳节活动总结
2015/03/24 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
雷锋之歌观后感
2015/06/10 职场文书
教学副校长工作总结
2015/08/13 职场文书