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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
JavaScript Timer实现代码
Feb 17 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
AngularJs 常用的过滤器
May 15 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
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
多广告投放代码 推荐
2006/11/13 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python中的字典使用分享
2016/07/31 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python GUI编程完整示例
2019/04/04 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python tkinter三种布局实例详解
2020/01/06 Python
骨干教师培训感言
2014/01/16 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
挂职自我鉴定
2014/02/26 职场文书
六一儿童节主持词
2014/03/21 职场文书
校庆筹备方案
2014/03/30 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
入党培养人考察意见
2015/06/08 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python