jquery拖动改变div大小


Posted in jQuery onJuly 04, 2017

本文实例为大家分享了jquery拖动改变div大小的具体代码,供大家参考,具体内容如下

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 版“元素拖拽改变大小”原型 </title> 
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
<script type="text/javascript"> 
  /* 
   * jQuery.Resize by wuxinxi007 
   * Date: 2011-5-14 
   * blog : http://wuxinxi007.cnblogs.com/ 
   */ 
  $(function(){ 
    //绑定需要拖拽改变大小的元素对象 
    bindResize(document.getElementById('test')); 
  }); 
  
  function bindResize(el){ 
    //初始化参数 
    var els = el.style, 
      //鼠标的 X 和 Y 轴坐标 
      x = y = 0; 
    //邪恶的食指 
    $(el).mousedown(function(e){ 
      //按下元素后,计算当前鼠标与对象计算后的坐标 
      x = e.clientX - el.offsetWidth, 
      y = e.clientY - el.offsetHeight; 
      //在支持 setCapture 做些东东 
      el.setCapture ? ( 
        //捕捉焦点 
        el.setCapture(), 
        //设置事件 
        el.onmousemove = function(ev){ 
          mouseMove(ev || event) 
        }, 
        el.onmouseup = mouseUp 
      ) : ( 
        //绑定事件 
        $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp) 
      ) 
      //防止默认事件发生 
      e.preventDefault() 
    }); 
    //移动事件 
    function mouseMove(e){ 
      //宇宙超级无敌运算中... 
      els.width = e.clientX - x + 'px', 
      els.height = e.clientY - y + 'px' 
    } 
    //停止事件 
    function mouseUp(){ 
      //在支持 releaseCapture 做些东东 
      el.releaseCapture ? ( 
        //释放焦点 
        el.releaseCapture(), 
        //移除事件 
        el.onmousemove = el.onmouseup = null 
      ) : ( 
        //卸载事件 
        $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) 
      ) 
    } 
  } 
</script> 
<style type="text/css"> 
#test{ 
  position:absolute; 
  top:0;left:0; 
  width:200px; 
  height:100px; 
  background:#f1f1f1; 
  text-align:center; 
  line-height:100px; 
  border:1px solid #CCC; 
  cursor:move; 
} 
</style> 
</head> 

<body> 
  <div id="test">dgdg</div> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中map函数的两种方式
Apr 07 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery图片放大镜效果
Jun 23 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery简介_动力节点Java学院整理
Jul 04 #jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 #jQuery
jQuery实现点击关注和取消功能
Jul 03 #jQuery
You might like
JavaScript实现删除电脑的关机键
2016/07/26 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
Express.JS使用详解
2014/07/17 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python读取Excel实例详解
2018/08/17 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
详解Python发送email的三种方式
2018/10/18 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
C语言笔试题回忆
2015/04/02 面试题
户外用品商店创业计划书
2014/01/29 职场文书
元旦促销方案
2014/03/15 职场文书
住房租房协议书
2014/08/20 职场文书
村道德模范事迹材料
2014/08/28 职场文书
《藏戏》教学反思
2016/02/23 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript