看一下最终效果,图片可以拖动,可以缩放

把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的left和top值

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

      #box {

          width: 100px;

          height: 100px;

          background-color: aquamarine;

          position: absolute;

      }

      #father {

        width: 600px;

        height: 500px;

        background-color: rgb(226, 117, 184);

        position: relative;

      }

      img {

        width: 100%;

        height: 100%;

        cursor: move;

      }

      #scale {

        width: 10px;

        height: 10px;

        overflow: hidden;

        cursor: se-resize;

        position: absolute;

        right: 0;

        bottom: 0;

        background-color: rgb(122, 191, 238);

      }

  </style>

</head>

<body>

    <div id="father">

      <div id="box">

        <img src="http://img4.imgtn.bdimg.com/it/u=4245161611,1195625695&fm=27&gp=0.jpg"/>

        <div id="scale"></div>

      </div>

    </div>

    <script type="text/javascript">

    // box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标

        var box = document.getElementById("box");

        var fa = document.getElementById('father');

        var scale = document.getElementById("scale");

        // 图片移动效果

        box.onmousedown=function(ev) {

            var oEvent = ev;

            // 浏览器有一些图片的默认事件,这里要阻止

            oEvent.preventDefault();

            var disX = oEvent.clientX - box.offsetLeft;

            var disY = oEvent.clientY - box.offsetTop;

            fa.onmousemove=function (ev) {

                oEvent = ev;

                oEvent.preventDefault();

                var x = oEvent.clientX -disX;

                var y = oEvent.clientY -disY;

                // 图形移动的边界判断

                x = x <= 0 ? 0 : x;

                x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;

                y = y <= 0 ? 0 : y;

                y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;

                box.style.left = x + 'px';

                box.style.top = y + 'px';

            }

            // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效

            fa.onmouseleave = function () {

              fa.onmousemove=null;

              fa.onmouseup=null;

            }

            // 鼠标弹起后停止移动

            fa.onmouseup=function() {

               fa.onmousemove=null;

               fa.onmouseup=null;

            }

        }

        // 图片缩放效果

        scale.onmousedown = function (e) {

          // 阻止冒泡,避免缩放时触发移动事件

          e.stopPropagation();

          e.preventDefault();

          var pos = {

            'w': box.offsetWidth,

            'h': box.offsetHeight,

            'x': e.clientX,

            'y': e.clientY

          };

          fa.onmousemove = function (ev) {

            ev.preventDefault();

            // 设置图片的最小缩放为30*30

            var w = Math.max(30, ev.clientX - pos.x + pos.w)

            var h = Math.max(30,ev.clientY - pos.y + pos.h)

            // console.log(w,h)

            // 设置图片的最大宽高

            w = w >= fa.offsetWidth-box.offsetLeft ? fa.offsetWidth-box.offsetLeft : w

            h = h >= fa.offsetHeight-box.offsetTop ? fa.offsetHeight-box.offsetTop : h

            box.style.width = w + 'px';

            box.style.height = h + 'px';

            // console.log(box.offsetWidth,box.offsetHeight)

          }

          fa.onmouseleave = function () {

            fa.onmousemove=null;

            fa.onmouseup=null;

          }

          fa.onmouseup=function() {

            fa.onmousemove=null;

            fa.onmouseup=null;

          }

        }

    </script>

</body>

</html>

我画了一张图,来标识每次鼠标移动,图片定位left和top的计算

最近在图片移动的基础上加了几个小功能,写了一个照片墙的demo,有兴趣可以看下

https://www.cnblogs.com/steamed-twisted-roll/p/11107121.html

原生JS实现图片拖拽移动与缩放的更多相关文章

  1. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  2. 好玩的原生js的简单拖拽

    这个拖拽的图片不是唯一的,拿到代码自己添加一张照片就可以啦 <!DOCTYPE html><html> <head> <meta charset=" ...

  3. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  4. 原生js实现div拖拽

    十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. vue 图片拖拽和滚轮缩放

    这里注意如果自己的页面有滚动条,一定阻止滚动事件的默认行为,否则缩放图片的时候,页面会跟着滚动@mousewheel.prevent 阻止默认行为 <div ref="imgWrap& ...

  6. 自制一个H5图片拖拽、裁剪插件（原生JS）

    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...

  7. HTML5多图片拖拽上传带进度条

    前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载 ...

  8. Vue富文本编辑器（图片拖拽缩放）

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  9. vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

    最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...

随机推荐

  1. (转)typedef和#define的用法与区别

    typedef和#define的用法与区别 一.typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间,实例像: ...

  2. php学习笔记-php中的比较运算符

    其中比较难懂的是==和=== ==是只比较两个变量的值,不仅仅是用于比较两个数是否相等,还可以比较int和string,不过会先转化string为int类型再比较,值相等则返回true,值不相等则返回 ...

  3. C语言-郝斌笔记-003数据类型

    基本类型数据 整数 整型     —— int      --4字节  短整型   —— short int   ——2字节 长整型   —— long int    ——8字节      浮点数[实 ...

  4. java中什么是代码点，什么是代码单元？

    1.代码点&代码单元,是从Unicode标准而来的术语,Unicode标准的核心是一个编码字符集,它为每一个字符分配一个唯一数字.Unicode标准始终使用16进制数字,并且在书写时在前面加上 ...

  5. clions的使用

    最近无聊玩了下CLion这个IDE,顺便学习了下CMAKE怎么使用.话说CLion的CMAKE的支持还不是特别的完好,和命令行模式还有有区别,有如下几个问题: 1:CMAKE的编译目录不能指定,而是I ...

  6. WebGoat系列实验Buffer Overflows & Code Quality & Concurrency

    WebGoat系列实验Buffer Overflows & Code Quality & Concurrency Off-by-One Overflows 实验需要访问OWASP Ho ...

  7. 后台调js方法

    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>btnSearch( ...

  8. C#实现截图

    语言环境 框架: .NET Framework 3.5IDE: VS2013窗体A(主窗体) /// <summary>/// 点击弹出截屏窗体/// </summary>// ...

  9. 动态横向(水平)合并Repeater数据行DataItem的列

    Insus.NET有对GridView控件进行横纵分别合并列:横:<动态横向(水平)合并GridView数据行DataRow的列>http://www.cnblogs.com/insus/ ...

  10. SSH—Struts2拦截器的应用（防止未登录用户进行操作）

    前言 类似于京东.淘宝这些平台,如果单纯的去浏览页面上的一些商品显示,一点问题都没有,但是当你点击商品的订单详情或者想查看一下自己的购物车,那么就会出现通过登录进去的界面,这个就是今天要说的这个拦截器 ...