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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 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+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
微信小程序自定义组件
2017/08/16 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python tkinter基本属性详解
2019/09/16 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
浅谈Python中的模块
2020/06/10 Python
如何用python免费看美剧
2020/08/11 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
《狼和小羊》教学反思
2014/04/20 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
厉行节约工作总结
2015/08/12 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python