js实现鼠标拖拽缩放div实例代码


Posted in Javascript onMarch 25, 2019

封装为了jq插件,如下

drag.js

;(function ($) {
 $.fn.dragDiv = function (options) {
  var def = {
   maxW:600,// 可伸缩的最大宽度
   minW:50// 可伸缩的最小宽度
  };// 参数默认值
  var opts = $.extend(def,options);// 扩展参数,使用默认值或传参
  //设置最大/最小宽度
  var max_width = opts.maxW,
   min_width = opts.minW;
 
  //记录鼠标相对left盒子x轴位置
  var mouse_x = 0;
  var left = $(this).parent('div')[0];
 
  //鼠标移动事件
  function mouseMove(e) {
   var e = e || window.event;
   var left_width = e.clientX - mouse_x;// 可伸缩div的宽度
   left_width = left_width < min_width ? min_width : left_width;
   left_width = left_width > max_width ? max_width : left_width;
   left.style.width = left_width + "px";
  }
  //终止事件
  function mouseUp() {
   document.onmousemove = null;
   document.onmouseup = null;
  }
  $(this).mousedown(function (e) {
   var e = e || window.event;
   //阻止默认事件
   e.preventDefault();
   mouse_x = e.clientX - left.offsetWidth;// 可伸缩div距离左侧边界的宽度
   document.onmousemove = function () {
    mouseMove()
   };
   document.onmouseup = function () {
    mouseUp()
   };
  })
 }
})(jQuery)

html文件

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>鼠标进行伸缩div</title>
 <style>
  * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  .dragdom {
   background: #cccccc;
   width: 100px;
   height: 600px;
   margin: 0 auto;
   position: relative;
  }
  .dragdom .drag {
   border: 1px transparent solid;
   width: 0px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   cursor: e-resize;
  }
 </style>
</head>
<body>
<div class="dragdom"><div class="drag"></div></div>
</body>
</html>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./drag.js"></script>
<script>
 $(function () {
  $('.drag').dragDiv();
 })
</script>

以上所述是小编给大家介绍的js实现鼠标拖拽缩放div详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Javascript实现简易天数计算器
May 18 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 #Javascript
9102了,你还不会移动端真机调试吗
Mar 25 #Javascript
详解原生JS回到顶部
Mar 25 #Javascript
javascript验证form表单数据的案例详解
Mar 25 #Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 #Javascript
详解javascript函数写法大全
Mar 25 #Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 #Javascript
You might like
php文件上传的简单实例
2013/10/19 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php实现的xml操作类
2016/01/15 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
python实现图片处理和特征提取详解
2017/11/13 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python dataframe NaN处理方式
2019/12/26 Python
Python csv文件记录流程代码解析
2020/07/16 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
班班通校本培训方案
2014/03/12 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年项目工作总结
2015/04/29 职场文书
毕业生入职感言
2015/07/31 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
python munch库的使用解析
2021/05/25 Python