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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jQuery实现穿梭框效果
Jan 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
德劲1103二次变频版的打磨
2021/03/02 无线电
CURL状态码列表(详细)
2013/06/27 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
在视频前插入广告
2006/11/20 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
静态页面实现 include 引入公用代码的示例
2017/09/25 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
js实现导航跟随效果
2018/11/17 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
毕业生就业自荐信
2013/12/04 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Java移除无效括号的方法实现
2021/08/07 Java/Android