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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
jquery实现聊天机器人
Feb 08 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现评论模块
Aug 19 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP5 安装方法
2006/10/09 PHP
用libTemplate实现静态网页的生成
2006/10/09 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
js图片处理示例代码
2014/05/12 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python requests.get带header
2020/05/05 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
水务局局长岗位职责
2013/11/28 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
顶岗实习计划书
2015/01/16 职场文书
2016年端午节寄语
2015/12/04 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers