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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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基于base64解码图片与加密图片还原实例
2014/11/03 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Python中__name__的使用实例
2015/04/14 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
用python制作游戏外挂
2018/01/04 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python实现自动解数独小程序
2019/01/21 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python re模块常见用法例举
2021/03/01 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
单位活动策划方案
2014/08/17 职场文书
电影建党伟业观后感
2015/06/01 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
python实现黄金分割法的示例代码
2021/04/28 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android