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

把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去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. 吸收效果，像是在Mac上的垃圾桶的效果一样

    #import "AppDelegate.h" #import <QuartzCore/QuartzCore.h> @interface AppDelegate () ...

  2. 除了ROS ，机器人自主定位导航还能怎么做？

    博客转载自:https://www.leiphone.com/news/201609/10QD7yp7JFV9H9Ni.html 雷锋网(公众号:雷锋网)按:本文作者科技剪刀手,思岚科技技术顾问. 随 ...

  3. 记得适当的声明成员函数为const.

    如果确信一个成员函数不用修改它的对象,就可以声明它为const,这样就可以作用于他的const对象了.因为const对象只能调用它的const方法. template<class T> c ...

  4. Entity Framework Code-First（21）：Automated Migration

    Automated Migration: Entity framework 4.3 has introduced Automated Migration so that you don't have ...

  5. JavaScript-ES6中的class及继承

    我们知道,ES6中,引入了class这个关键字,让在JavaScript中定义类更加简单了 在介绍ES6中的class之前,我们先来看一下JavaScript之前类的实现,在此之前,JavaScrip ...

  6. MySQL中MyISAM引擎与InnoDB引擎性能简单测试

    [硬件配置]CPU : AMD2500+ (1.8G)内存: 1G/现代硬盘: 80G/IDE[软件配置]OS : Windows XP SP2SE : PHP5.2.1DB : MySQL5.0.3 ...

  7. Ubuntu学习小结(一) 基础知识,系统安装,软件安装,解压缩

    这段时间,抽空研究了一下Ubuntu,虽然也有过到目前为止使用计算机最作死的经历,但目前已经学会了一些最基本的操作.在这里简单的记录一下,算是吸取的教训,供其他人借鉴. 1.装Ubuntu系统.装Ub ...

  8. WebGoat系列实验Injection Flaws

    WebGoat系列实验Injection Flaws Numeric SQL Injection 下列表单允许用户查看天气信息,尝试注入SQL语句显示所有天气信息. 选择一个位置的天气,如Columb ...

  9. 【Android4高级编程笔记】深入探讨Android Activity

    创建Activity 要创建一个新的Activity,需要对Activity类进行扩展,在新类定义用户界面并实现新的功能. 视图是用来显示数据和提高用户交互的Ui控件.Android提供了多个布局类, ...

  10. 2019年第十届蓝桥杯省赛-糖果（一维状压dp）

    看到20的数据量很容易想到状压dp. 开1<<20大小的数组来记录状态,枚举n个糖包,将其放入不同状态中(类似01背包思想) 时间复杂度O(n*(2^20)). import java.u ...