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 相关文章推荐
jquery中获取元素的几种方式小结
Jul 05 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
angular组件间通讯的实现方法示例
May 07 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
原生JS中应该禁止出现的写法
May 05 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
领悟php接口中interface存在的意义
2013/06/27 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python3运算符常见用法分析
2020/02/14 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
django rest framework 过滤时间操作
2020/07/12 Python
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS