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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
js 函数的副作用分析
Aug 23 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python爬取网易云音乐评论
2018/11/16 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
浅析python内置模块collections
2019/11/15 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
如何写一个自定义标签
2012/12/28 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
平民服装店创业计划书
2014/01/17 职场文书
单位介绍信范文
2014/01/18 职场文书
精彩的广告词
2014/03/19 职场文书
先进学校事迹材料
2014/12/30 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书