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 相关文章推荐
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
十个迅速提升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
虫族 Zerg 历史背景
2020/03/14 星际争霸
全文搜索和替换
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
python定时器使用示例分享
2014/02/16 Python
python动态加载变量示例分享
2014/02/17 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python地图绘制实操详解
2019/03/04 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python 图片去噪的方法示例
2019/07/09 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
python 多线程中join()的作用
2020/10/29 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
2019年c语言经典面试题目
2016/08/17 面试题
《湘夫人》教学反思
2014/02/21 职场文书
党员创先争优心得体会
2014/09/11 职场文书
三方股东合作协议书
2014/10/28 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年大学生实习评语
2015/03/25 职场文书
校车安全管理责任书
2015/05/11 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript