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

把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去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. SpringBoot12 QueryDSL02之利用QueryDSL实现多表关联查询

    1 业务需求 有的系统业务逻辑比较复杂,存在着多表关联查询的的情况,查询的内容不仅仅是单张表的的内容而是多张表的字段组合而成的,直接使用SplringDataJPA实现是比较复杂的,但是如果使用Que ...

  2. C++的运算符重载 （转）

      C++中预定义的运算符的操作对象只能是基本数据类型.但实际上,对于许多用户自定义类型(例如类),也需要类似的运算操作.这时就必须在C++中重新定义这些运算符,赋予已有运算符新的功能,使它能够用于特 ...

  3. mono-3.0.2安装指南

     install-mono.sh.zip   mono-3.0.2安装指南.pdf   mod_mono.diff.zip mono-3.0.2安装指南 一见 2012/12/27 目录 1. 前言 ...

  4. 利用using和try/finally语句来清理资源

    使用非托管资源的类型必须实现IDisposable接口的Dispose()方法来精确的释放系统资源..Net环境的这一规则使得释放资源代码的职责 是类型的使用者,而不是类型或系统.因此,任何时候你在使 ...

  5. Altium Designer 3D模型的下载与添加

    先 先晒几个图:是不是很逼真啊..  ---------------------------------------教程---------------------------------------- ...

  6. SpringMVC的理解

    SpringMVC工作原理 SpringMvc是基于过滤器对servlet进行了封装的一个框架,我们使用的时候就是在web.xml文件中配置DispatcherServlet类:SpringMvc工作 ...

  7. C#实现远程开机（局域网测试通过）

    首先介绍相关知识. UDP协议 UDP 是User Datagram Protocol的简称, 中文名是用户数据报协议,是OSI(Open System Interconnection,开放式系统互联 ...

  8. WebStorm设置Themes

    1.首先去 http://www.phpstorm-themes.com/  选择你喜欢的主题,保存对应主题的xml文件到你本地 2.打开C:\Users\Administrator\.WebStor ...

  9. 计算DataTable某列的值(SUM)

    参考,如下:

  10. 算法训练 数字三角形（DP）

    问题描述 (图3.1-1)示出了一个数字三角形. 请编一个程序计算从顶至底的某处的一条路 径,使该路径所经过的数字的总和最大. ●每一步可沿左斜线向下或右斜线向下走: ●1<三角形行数≤100: ...