Jquery写一个鼠标拖动效果实现原理与代码


Posted in Javascript onDecember 24, 2012

近日项目中要做一个鼠标拖拽层的效果,于是手动使用Jquery做了一个,发出来跟大伙儿分享一下,并希望能得到高手的指点,如果哪位大侠觉得我的思路和代码不正确或者需要改进的话,希望能指点一二,在下感激不尽。

我的思路是这样的

1、在鼠标按下的时候,捕获鼠标的当前位置;

2、得到要移动对象的当前位置信息;

3、鼠标移动时,计算鼠标移动的距离,将这个距离更新到对象的位置,在我的代码中,我试用绝对定位来表示对象的位置;

4、当鼠标移出对象或者鼠标弹起的时候,则认为对象处于不能移动的状态。这个在我的代码中使用一个bool类型的变量isMouseDown表示,当这个变量为true的时候,则说明对象处于可移动状态,如果为false的时候,表示对象处于不可移动状态。鼠标移出对象或者弹出的时候,就将isMouseDown置为false。

好了,思路就是这样,下面将代码贴出来,如果我的思路中表达的不清楚的话,可以在代码中看出来:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>使用鼠标拖动层代码</title> 
<style type="text/css"> 
#Main 
{ 
width:400px; 
height:400px; 
position:absolute; 
top:10px; 
left:0; 
border:1px solid #CCC; 
border-radius:5px; 
background-color:Green; 
} 
h3 
{ 
margin:0; 
width:400px; 
height:40px; 
background-color:Gray; 
cursor:move; 
line-height:40px; 
border-radius:5px 5px 0 0; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script> 
<script type="text/javascript"> 
//注册一个Jquery的鼠标拖动函数,参数为要拖动的对象 
$.fn.extend({ SliderObject: function (objMoved) { 
var isMouseDown = false; //鼠标是否按下 
var mouseDownPosiX; 
var mouseDownPosiY; 
var InitPositionX; 
var InitPositionY; 
var obj = $(objMoved) == undefined ? $(this) : $(objMoved); 
obj.mousedown(function (e) { 
//当鼠标按下时捕获鼠标位置以及对象的当前位置 
mouseDownPosiX = e.pageX; 
mouseDownPosiY = e.pageY; 
isMouseDown = true; InitPositionX = obj.css("left").replace("px", ""); 
InitPositionY = obj.css("top").replace("px", ""); 
}).mousemove(function (e) { 
//当鼠标按下并且移动时,首先判断鼠标是否在当前焦点,以及鼠标是否已经弹起, 
if ($(this).is(":focus") && isMouseDown) { 
var tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(InitPositionX); 
var tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(InitPositionY); 
obj.css("left", tempX + "px").css("top", tempY + "px"); 
} 
//当鼠标弹起或者离开元素时,将鼠标弹起置为false,不移动对象 
}).mouseup(function () { 
isMouseDown = false; 
}).mouseleave(function () { 
isMouseDown = false; 
}); 
} 
}); 
$(document).ready(function () { 
$("#Slider").SliderObject($("#Main")); 
}) 
</script> 
</head> 
<body> 
<div id="Main"> 
<h3>鼠标放在这里拖动我</h3> 
<div id="Container">可以使用鼠标拖动的层</div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 #Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 #Javascript
ajax中get和post的说明及使用与区别
Dec 23 #Javascript
javascript 全选与全取消功能的实现代码
Dec 23 #Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 #Javascript
javascript小数四舍五入多种方法实现
Dec 23 #Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 #Javascript
You might like
ThinkPHP视图查询详解
2014/06/30 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Angular的自定义指令以及实例
2016/12/26 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python实现注册登录系统
2017/08/08 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
浅谈django orm 优化
2018/08/18 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
机关出纳岗位职责
2014/04/03 职场文书
节水倡议书范文
2014/04/15 职场文书
高三霸气励志标语
2014/06/24 职场文书
植树节标语
2014/06/27 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
golang正则之命名分组方式
2021/04/25 Golang