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

封装为了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详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js完美的div拖拽实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • div拖拽插件——JQ.MoveBox.js(自制JQ插件)

    有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ插件的一个小练习. html为 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • 完美的js div拖拽实例代码

    本文实例为大家分享了完美的js div拖拽实例代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • js实现简单div拖拽功能实例

    本文实例讲述了js实现简单div拖拽功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="

  • 原生javascript实现DIV拖拽并计算重复面积

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

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

    封装为了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; //

  • JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例

    本文实例讲述了JS实现鼠标拖拽盒子移动及右键点击盒子消失效果.分享给大家供大家参考,具体如下: 1. 鼠标拖拽盒子移动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } div{ width: 1

  • js实现鼠标拖拽多选功能示例

    js实现鼠标拖拽多选功能示例

    最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&

  • JavaScript实现鼠标拖拽调整div大小

    本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码,供大家参考,具体内容如下 实现思路: 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式,通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置, 并开始根据鼠标的移动修改div的尺寸 鼠标松开时结束尺寸修改 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • GRID拖拽行的实例代码

    ---------------------GRID拖拽行的实例代码  单行拖拽--------------------------------------- 复制代码 代码如下: //创建第一个GRIDvar firstGrid = new Ext.grid.GridPanel({ddGroup : 'secondGridDdGroup',//这里是第二个GRID的ddGroupstore       : firstGridStore,enableDragDrop : true,//True表示

  • Android条目拖拽删除功能实例代码

    Android条目拖拽删除功能实例代码

    项目中需求,要做条目条目拖拽删除效果,实际效果和QQ消息删除一样,侧滑有制定和删除. 效果图 第一步效果图 1.0自定义控件 SwipeLayout 继承FrameLayout重写里面三个构造方法,分别调用initView(). 2.0在布局中使用自定义控件 3.0在initView()方法中,创建拖拽辅辅助工具 ViewDragHelper() 该方法需要传入回调 MyCallBack() 4.0,创建MyCallBack()回调,继承ViewDragHelper.Callback 在回调中

  • js实现鼠标拖拽div左右滑动

    js实现鼠标拖拽div左右滑动

    本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script> <style&

  • 使用javaScript实现鼠标拖拽事件

    本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; } div{ position: absolute; top: 200px;/*div的y轴*/ left: 150px;/*div的x轴*/ width: 3

  • JavaScript实现div的鼠标拖拽效果

    JavaScript实现div的鼠标拖拽效果

    本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下 实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re

  • js实现登录拖拽窗口

    js实现登录拖拽窗口

    本文实例为大家分享了js实现登录拖拽窗口的具体代码,供大家参考,具体内容如下 做这个案例的两个关键点: 1.用js将盒子在可视区域居中显示 本可以用css将盒子用定位的方式居中显示,但是采用js的方法更好些. 方法: 盒子的left值 = (可视区域的宽度 - 盒子自身的宽度)/ 2; 盒子的top值 = (可视区域的高度 - 盒子自身的高度)/ 2; 这样盒子就居中显示 2.先鼠标按下,然后鼠标在整个文档上移动时,盒子的位置跟着鼠标移动 这一点上要注意的点: 1)鼠标按下时,鼠标相对盒子X方向

随机推荐