基于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 浮动层菜单收藏
Jan 16 Javascript
基于jquery的放大镜效果
May 30 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
利用JS实现数字增长
Jul 28 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JavaScript错误处理操作实例详解
Jan 04 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
详解Vue router路由
Nov 20 Vue.js
基于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中图片等比缩放的实例
2013/03/24 PHP
php多任务程序实例解析
2014/07/19 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python如何读取、写入JSON数据
2020/07/28 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
园林资料员岗位职责
2013/12/30 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
母婴店促销方案
2014/03/05 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
2014年公司工作总结
2014/11/22 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
节水宣传标语口号
2015/12/26 职场文书