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 树形导航菜单实例代码
Aug 13 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jQuery取id有.的值的方法
May 21 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
Vue中key的作用示例代码详解
Jun 10 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
Web开发之JavaScript
2012/03/29 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
挂职思想汇报
2013/12/31 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书