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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
vue在图片上传的时候压缩图片
Nov 18 Vue.js
一文帮你理解PReact10.5.13源码
Apr 03 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生成短网址的3种方法代码实例
2014/07/08 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
OpenCV实现人脸识别
2017/04/07 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python 十六进制整数与ASCii编码字符串相互转换方法
2018/07/09 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Python 列表的清空方式
2020/01/13 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
一套VC试题
2015/01/23 面试题
大学生开西餐厅创业计划书
2014/02/01 职场文书
《陶罐和铁罐》教学反思
2014/02/19 职场文书
农林环境专业求职信
2014/03/13 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js