jQuery 版元素拖拽原型代码


Posted in Javascript onApril 25, 2011

本文主要针对拖拽原型进行解析,给刚接触 JQuery 的爱好者一个简单的示例。
在引入 Jquery.js 后:

<script type="text/javascript"> 
$(function(){ 
//绑定拖动元素对象 
bindDrag(document.getElementById('test')); 
}); 
function bindDrag(el){ 
//初始化参数 
var els = el.style, 
//鼠标的 X 和 Y 轴坐标 
x = y = 0; 
//邪恶的食指 
$(el).mousedown(function(e){ 
//按下元素后,计算当前鼠标位置 
x = e.clientX - el.offsetLeft; 
y = e.clientY - el.offsetTop; 
//IE下捕捉焦点 
el.setCapture && el.setCapture(); 
//绑定事件 
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp); 
}); 
//移动事件 
function mouseMove(e){ 
//宇宙超级无敌运算中... 
els.top = e.clientY - y + 'px'; 
els.left = e.clientX - x + 'px'; 
} 
//停止事件 
function mouseUp(){ 
//IE下释放焦点 
el.releaseCapture && el.releaseCapture(); 
//卸载事件 
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp); 
} 
} 
</script>

下载:完整示例
Javascript 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
jquery实现的导航固定效果
Apr 28 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
详解Vue取消eslint语法限制
Aug 04 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 #Javascript
分享14个很酷的jQuery导航菜单插件
Apr 25 #Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 #Javascript
基于jquery的二级联动菜单实现代码
Apr 25 #Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 #Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 #Javascript
You might like
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
python os.fork() 循环输出方法
2019/08/08 Python
利用Python实现kNN算法的代码
2019/08/16 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
大雁塔英文导游词
2015/02/10 职场文书
二审代理词范文
2015/05/25 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python