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点赞功能实现代码 点个赞吧!
May 29 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 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
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
layui导航栏实现代码
2017/05/19 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
详解Python的循环结构知识点
2019/05/20 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
python 实现控制鼠标键盘
2020/11/27 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
农村婚礼证婚词
2014/01/10 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS