产品需求，需要用到对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. JS中this指向问题和改变this指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  2. 使用gulp搭建一个传统的多页面前端项目的开发环境

    1.简介 使用gulp搭建一个传统的多页面前端项目的开发环境 支持pug scss es6编译支持 支持开发环境和打包生成sourceMap 支持文件变动自动刷新浏览器,css是热更新(css改动无需 ...

  3. Oauth2.0详解,Oauth2.0协议原理

    角色: RO (resource owner): 资源所有者,对资源具有授权能力的人,通常比喻为用户 RS (resource server): 资源服务器,存储资源.并处理对资源的访问请求 Clie ...

  4. Spring Taco Cloud——design视图的创建（含thymeleaf模板遇到的一些小问题）

    先来看下综合前两篇内容加上本次视图的成果   可能不是很美观,因为并没有加css样式,我想等整个项目有个差不多的功能实现后再进行页面优化,请谅解 下面我贴上自己定义修改过的Taco的design视图代 ...

  5. postman 参数传递

    pm.test("Status code is 200", function () { pm.response.to.have.status(200); }); pm.test(& ...

  6. 使用css动画实现领积分效果

    最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

  7. php--一些新知识总结

    魔术方法__invoke() 当尝试以调用函数的方式调用一个对象时,__invoke() 方法会被自动调用 class Test { public function __invoke($a) { va ...

  8. 天天写order by，你知道Mysql底层执行原理吗？

    前言 文章首发于微信公众号[码猿技术专栏]. 在实际的开发中一定会碰到根据某个字段进行排序后来显示结果的需求,但是你真的理解order by在 Mysql 底层是如何执行的吗? 假设你要查询城市是苏州 ...

  9. bootstrapTable随机改变列颜色

    { title: '运单编号', field: 'waybillNumber', align: 'center', valign: 'middle', cellStyle: function (val ...

  10. 这价格看得我偷偷摸了泪——用python爬取北京二手房数据

    如果想了解更多关于python的应用,可以私信我,或者加群,里面到资料都是免费的 http://t.cn/A6Zvjdun 近期,有个朋友联系我,想统计一下北京二手房的相关的数据,而自己用Excel统 ...