基于jquery的鼠标拖动效果代码


Posted in Javascript onMay 30, 2012

记得在之前的一个"拖动层"的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素。
这两天看了一些东西,发现不需要设这个布尔变量;

实现过程:
按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数。

//按下鼠标并移动时(拖动),调用的函数; 
function startSelection(event){ 
…… 
} //解除移动时的处理函数; 
function cancelSelection() { 
$(document).unbind('mousemove', startSelection).unbind('mouseup', cancelSelection); 

} 
//鼠标在按下时调用的函数 
function imgMouseDown(event){ 
$(document).mousemove(startSelection).mouseup(cancelSelection); 
} 
$img.bind("mousedown",imgMouseDown)
Javascript 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery each函数源码分析
May 25 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 #Javascript
基于jQuery的倒计时实现代码
May 30 #Javascript
基于jquery的放大镜效果
May 30 #Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 #Javascript
Javascript的常规数组和关联数组对比小结
May 24 #Javascript
基于mootools插件实现遮罩层新手引导
May 24 #Javascript
jQuery 拖动层(在可视区域范围内)
May 24 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
javascript运动详解
2015/07/06 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python functools模块学习总结
2015/05/09 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python机器学习库常用汇总
2017/11/15 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
深入了解Python在HDA中的应用
2019/09/05 Python
简单了解django文件下载方式
2020/02/10 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
驾驶员安全责任书
2014/07/22 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
考试作弊检讨书
2015/01/27 职场文书
采购内勤岗位职责
2015/04/13 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android