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获取IFRAME当前的URL的方法
Nov 13 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
vue+iview实现分页及查询功能
Nov 17 Vue.js
十个迅速提升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和.net的区别
2014/09/28 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
Jquery常用技巧收集整理篇
2010/11/14 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
Javascript基础教程之switch语句
2015/01/18 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python3实现购物车功能
2018/04/18 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python3 翻转二叉树的实现
2019/09/30 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
什么是Python变量作用域
2020/06/03 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
毕业生造价工程师求职信
2013/10/17 职场文书
20年同学聚会感言
2014/02/03 职场文书
大学军训感言400字
2014/03/11 职场文书
师范生自我鉴定
2014/03/20 职场文书
仓库文员岗位职责
2014/04/06 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers