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 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
js实现右键菜单功能
Nov 28 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 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
PHP 正则表达式常用函数
2014/08/17 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
用python写测试数据文件过程解析
2019/09/25 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
酒店管理专业自荐信
2014/05/23 职场文书
授权委托书协议书
2014/10/16 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
老公保证书怎么写
2015/02/26 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
花田少年史观后感
2015/06/16 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android