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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python中的rfind()方法使用详解
2015/05/19 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Anaconda入门使用总结
2018/04/05 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python 画出来六维图
2019/07/26 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
大学生就业自荐信
2013/10/26 职场文书
培训心得体会
2013/12/29 职场文书
设计专业自荐信
2014/06/19 职场文书
防汛通知
2015/04/25 职场文书
博士论文答辩开场白
2015/06/01 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
新手必备Python开发环境搭建教程
2021/05/28 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers
TypeScript 内置高级类型编程示例
2022/09/23 Javascript