基于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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
详解Vue之计算属性
Jun 20 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
Javascript中的解构赋值语法详解
Apr 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
php上传、管理照片示例
2006/10/09 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vuex实现及简略解析(小结)
2019/03/01 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
详细介绍Ruby中的正则表达式
2015/04/10 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
python实现简易内存监控
2018/06/21 Python
python数据归一化及三种方法详解
2019/08/06 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
初二生物教学反思
2014/02/03 职场文书
体操比赛口号
2014/06/10 职场文书
硕士生找工作求职信
2014/07/05 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Django基础CBV装饰器和中间件
2022/03/22 Python