基于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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
深入理解vue路由的使用
Mar 24 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 Javascript
微信小程序实时聊天WebSocket
Jul 05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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 win下Socket方式发邮件类
2009/08/21 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
php xhprof使用实例详解
2019/04/15 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
jQuery选择器中的特殊符号处理方法
2017/09/08 jQuery
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
几道PHP的面试题
2012/05/19 面试题
医药工作者的求职信范文
2013/09/21 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
期末自我鉴定
2014/02/02 职场文书
C++程序员求职信
2014/05/07 职场文书
业务员管理制度范本
2015/08/06 职场文书