JQuery拖拽元素改变大小尺寸实现代码


Posted in Javascript onDecember 10, 2012

"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了

下面是 JavaScript Code

<script type="text/javascript"> 
/* 
* jQuery.Resize by wuxinxi007 
* Date: 2011-5-14 
*/ 
$(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>
Javascript 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JS回调函数深入理解
Oct 16 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 #Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 #Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 #Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 #Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 #Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 #Javascript
js切换div css注意的细节
Dec 10 #Javascript
You might like
PHP教程 变量定义
2009/10/23 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
JQuery基础语法小结
2015/02/27 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
集体备课反思
2014/02/12 职场文书
家庭教育的心得体会
2014/09/01 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
财务审计整改报告
2014/11/06 职场文书
逃课检讨书
2015/01/26 职场文书
寒山寺导游词
2015/02/03 职场文书
初中生物教学随笔
2015/08/15 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书