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 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
浅谈javascript的调试
Jan 28 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
Vue组件跨层级获取组件操作
Jul 27 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数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
《自选商场》教学反思
2014/02/14 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
四查四看整改措施
2014/09/19 职场文书
逃课检讨书
2015/01/26 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
vue封装数字翻牌器
2022/04/20 Vue.js