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

把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去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. linq 初步认识

    linq to sql 类 介绍: linq如果不能用的话 重装一下vs就好了 LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言 ...

  2. JavaPersistenceWithHibernate第二版笔记-第七章-003Mapping an identifier bag(@OrderColumn、@ElementCollection、@CollectionTable、、)

    一.结构 二.代码 1. package org.jpwh.model.collections.listofstrings; import org.jpwh.model.Constants; impo ...

  3. R: 判别分析

    判别与聚类的比较: 聚类分析和判别分析有相似的作用,都是起到分类的作用. 判别分析是已知分类然后总结出判别规则,是一种有指导的学习: 聚类分析则是有了一批样本,不知道它们的分类,甚至连分成几类也不知道 ...

  4. 数据结构_wow(泡泡的饭碗)

    问题描述 饱了吗终于发现泡泡破解了它的代码并借此白吃白喝.饱了吗当即改变了自己的幸运儿生成源码,但是,又被机智的泡泡偷瞄到了,机智的泡泡马上意识到可能要饭碗不保了:每当有人参与抽奖,这个人就进入队列. ...

  5. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)

    1.ViewPager实现Tab 首先实现底部和底部布局 <?xml version="1.0" encoding="utf-8"?> <Li ...

  6. Date的转换输出

    public static void main(String[] args) { // TODO Auto-generated method stub //20131111怎么格式化成2013年11月 ...

  7. 《Linux内核设计与实现》读书笔记（九）- 内核同步介绍

    存在共享资源(共享一个文件,一块内存等等)的时候,为了防止并发访问时共享资源的数据不一致,引入了同步机制. 主要内容: 同步的概念 同步的方法-加锁 死锁 锁的粒度 1. 同步的概念 了解同步之前,先 ...

  8. The King’s Problem 强连通

    题意  有n个城市 m条有向边 将n个城市分成几个州 1.强连通必定在一个州里 2.州里的任意两个城市  u,v     满足u到v 或者v到u  其一即可 先缩点  然后求最小路就覆盖 #inclu ...

  9. ECMAScript 6 一些有意思的特性

    主要参考了下面两篇博文,对ES6的新特性做一些笔记,加深印象 ES6新特性概览 - 刘哇勇 - 博客园 es6快速入门 - _marven - 博客园 *号函数 迭代函数生成器 我能想到的生成器使用场 ...

  10. 51nod1040最大公约数之和（欧拉函数）

    题面 传送门 题解 这种题目就是推倒推倒 \[\sum_{i=1}^n \gcd(i,n)=\sum_{i|n}i\sum_{j=1}^n[\gcd(j,n)=i]\] \[\sum_{i=1}^n ...