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

把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去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. STM32 C++编程 001 工程模板

    将 STM32的官方工程模板 修改为我们这套教材的:STM32 C++工程模板 我使用的 STM32 库的版本 : V3.5.0 注意: 想学习本套 STM32 C++编程 的专栏是有点门槛的.你需要 ...

  2. Luogu 3008 [USACO11JAN]道路和飞机Roads and Planes

    BZOJ2200 听说加上slf优化的spfa的卡过,真的不想写这些东西. 考虑使用堆优化的dij算法. 先加上所有双向边,然后dfs一下搜出所有由双向边构成的联通块,然后加上所有的单向边,一边对所有 ...

  3. Clos Network

    1952年,Charles Clos 设计出了一种多级的交换架构,用多级的小型交换机阵列来构建一张大的无阻塞的网络.在此之前,要实现“无阻塞的架构”,只能采用NxN的Cross-bar方式. 而Clo ...

  4. Java Calendar 类的时间操作.RP

    JavaCalendar 类时间操作,这也许是创建和管理日历最简单的一个方案,示范代码很简单. 演示了获取时间,日期时间的累加和累减,以及比较. 原文地址:blog.csdn.NET/joyous/a ...

  5. scala中lazy

    Scala中通过lazy关键字来定义惰性变量,惰性变量只能是不可变变量.只有在调用惰性变量的时候,才会去实例化这个变量

  6. Fiddler系统监控参数解读

    转自:https://blog.csdn.net/txj236/article/details/38872855 在对系统监控的过程中,发现ClientConnected和ClientBeginReq ...

  7. C#模拟进度条

    自己看源码 using System; namespace ConsoleTest { class Program { static void Main(string[] args) { Consol ...

  8. .NET 实体转换辅助类

    /// <summary> /// 实体转换辅助类 /// </summary> public class ModelConvertHelper<T> where ...

  9. C++: I/O流详解

    一.输入流操作 1.read 无格式输入指定字节数 istream& read ( char* pch, int nCount ); istream& read ( unsigned ...

  10. SoftKeyboard在AndroidStudio下的配置和运行

    前文翻译的<Android下创建一个输入法>一文中提到了来自Google的输入法例程SoftKeyboard,备忘下该程序的配置和运行. 首先将SoftKeyboard导入AndroidS ...