产品需求，需要用到对div（dom）进行拖拽缩放操作，看到有好多插件，要么依赖jQuery，要么文件太大。

封装了一个插件，不压缩状态下5KB。

html

<!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>demo</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    html,

    body {

      width: 100%;

      height: 100%;

    }

    .box {

      width: 200px;

      height: 200px;

      border: 1px dashed #ccc;

      position: absolute;

      left: 50px;

      top: 50px;

    }

    .content {

      width: 100%;

      height: 100%;

      display: flex;

      justify-content: center;

      align-items: center;

      font-size: 28px;

    }

    .dragHandle {

      width: 15px;

      height: 15px;

      border-radius: 50%;

      background: #000;

      position: absolute;

      left: 0;

      top: -15px

    }

    .resizeHandle {

      display: block;

      position: absolute;

      width: 10px;

      height: 10px;

      border-right: 2px solid #b2b2b2;

      border-bottom: 2px solid #b2b2b2;

      right: 0px;

      bottom: 0px;

      overflow: hidden;

      cursor: nw-resize;

    }

  </style>

</head>

<body>

  <div class="box">

    <div class="content">

      Candy

    </div>

    <div class="dragHandle">

    </div>

    <div class="resizeHandle">

    </div>

  </div>

</body>

</html>

<script src="./drag.js">

</script>

<script>

  //父元素相对定位 relative

  //当前拖动元素绝对定位 absolute

  let elem = document.querySelector(".box")

  let dragHandle = document.querySelector(".dragHandle")

  let resizeHandle = document.querySelector(".resizeHandle")

  let drag = new Draggable(elem, dragHandle, resizeHandle, true, (dragStyle) => {

    console.log("当前元素现在的位置",dragStyle)

  }, (resizeStyle) => {

    console.log("当前元素现在的宽高",resizeStyle)

  });

</script>

js在github上，顺便点个星吧，谢谢啦：

github地址：https://github.com/1096121120/Draggable

骚年，我看你骨骼惊奇，有撸代码的潜质，这里有324.57GB的前端学习资料传授于你！什么，你不信？？？

先随便看几个图：





肯定没看够。再来个GIF图热个身？？？


那么问题来了，如果你也想入坑前端或者学习更多技术，广交天下朋友(基友)，认识更多有趣的灵魂，和沙雕网友在线斗图，撩更多小姐姐的话，欢迎加入前端交流群鸭~

扫二维码加为好友即可拉你入群获取学习资料哦。

div/dom元素拖拽缩放插件，纯js实现拖拽缩放，不依赖jQuery~的更多相关文章

  1. jQuery字体缩放缩放插件zoomFontSize.js

    插件描述:jQuery字体缩放缩放插件zoomFontSize.js根据父类进行百分比缩放,兼容性如下: 使用方法 body 的class属性 添加 changbody_fontSize 而且整个页面 ...

  2. baguetteBox.js响应式画廊插件(纯JS)

    baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...

  3. Layer获取iframe的dom元素及调用iframe页的js方法

    1. 父页面点击第一个按钮触发,获取子页面中的body元素,调用子页面中定义的js方法 yes : function(index,layero){ //获取iframe的body元素 var body ...

  4. kPagination纯js实现分页插件

    kPagination分页插件 纯js分页插件,压缩版本~4kb,样式可以自定义 demo 使用方法 <div id="pagination"></div> ...

  5. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  6. 动态修改 dom 元素的伪类样式

    最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / ...

  7. 简单的jquery进度条插件LineProgressbar.js，myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  8. jQuery支持移动Mobile的DOM元素移动和缩放插件

    jQuery Panzoom是一款很有用的HTML DOM元素平移和缩放jQuery和CSS3插件. Panzoom利用CSS transforms 和 matrix函数来为浏览器进行硬件(GPU)加 ...

  9. 纯js实现DIV拖拽

    写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但 ...

随机推荐

  1. PTA数据结构与算法题目集(中文) 7-14

    PTA数据结构与算法题目集(中文)  7-14 7-14 电话聊天狂人 (25 分)   给定大量手机用户通话记录,找出其中通话次数最多的聊天狂人. 输入格式: 输入首先给出正整数N(≤),为通话记录 ...

  2. Redis 练习（二）

    需求: 为购物网站实现登录状态及浏览记录的维护 进入时检查 token 是否已登录 每次进入更新 token 最新进入时间 记录用户浏览的商品信息(最多 25 个) 定时检查 token 数量,如果超 ...

  3. linux下shell脚本中sed命令的用法

    先来给一个案例: #将old.sql文件中的符号“|”替换为“,”,并保存到test.sql文件中 sed "s/|/,/g" "old.sql"> te ...

  4. python3.6 ubuntu部署nginx、 uwsgi、 django

    ubuntu部署nginx. uwsgi. django 将项目上传到服务器 python manager.py runserver 0:80 在浏览器输入服务器的域名或者ip地址,访问成功. 安装u ...

  5. "文字链接"组件:<h-link> —— 快应用组件库H-UI

     <import name="h-link" src="../Common/ui/h-ui/basic/c_link"></import&g ...

  6. Linux C++ 网络编程学习系列（6）——多路IO之epoll高级用法

    poll实现多路IO 源码地址:https://github.com/whuwzp/linuxc/tree/master/epoll_libevent 源码说明: server.cpp: 监听127. ...

  7. Labview 机器视觉IMAQ GetFileInfo函数详解

    ------------恢复内容开始------------ IMAQ GetFileInfo作用是获取图片文件的信息,包括Calibration(校准).文件类型.水平垂直分辨率.文件数据类型.图像 ...

  8. threejs使用各种坑实验过程

    第一次使用threejs到实际项目中,开始的时候心情有点小激动,毕竟是第一次嘛,然而做着做着就感受到这玩意水好深,满满的都是坑,填都填不过来.经过老板20天惨无人道的摧残,终于小有成就. 因为第一次搞 ...

  9. Daily Scrum 1/6/2015

    Process: Zhaoyang: Complete the speech API test and do some UI upgrade. Yandong: Help zhaoyang to do ...

  10. B - Raising Modulo Numbers

    People are different. Some secretly read magazines full of interesting girls' pictures, others creat ...