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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery实现计算器功能
Oct 19 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
提取HTML标签
2006/10/09 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
Python内置函数OCT详解
2016/11/09 Python
python 调用win32pai 操作cmd的方法
2017/05/28 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python使用mysql的两种使用方式
2018/03/07 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python3.5运算符操作实例详解
2019/04/25 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
实习单位接收函模板
2014/01/10 职场文书
节约用水标语
2014/06/11 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android