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

近日项目中要做一个鼠标拖拽层的效果，于是手动使用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>

赞 (0)

相关推荐

  • jquery简单的拖动效果实现原理及示例

    复制代码 代码如下: <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖曵原理实例</title> <style type="text/css"> #drag{width:400px;height:300px;backgr

  • 基于jquery的鼠标拖动效果代码

    记得在之前的一个"拖动层"的随笔中,我实现拖动,是用的一个布尔变量,判断是否可以拖动某元素. 这两天看了一些东西,发现不需要设这个布尔变量; 实现过程: 按下鼠标的时候,给文档对象(当然也可以是别的DOM对象)的移动事件绑定一个处理函数,同时也给鼠标抬起时绑定一个解除的处理函数. 复制代码 代码如下: //按下鼠标并移动时(拖动),调用的函数: function startSelection(event){ -- } //解除移动时的处理函数: function cancelSelec

  • jQuery拖动div、移动div、弹出层实现原理及示例

    代码演示: http://www.imqing.com/demo/movediv.html 大概原理: 使div的position为绝对定位absolute,然后控制其top与left值,需要监听鼠标事件,主要用到mousedown, mousemove, mouseup. 在mousedown后,记录mousedown时鼠标与需要移动的div的位置,然后取得两者之差,得到在鼠标移动后,div的位置.即: left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) to

  • jQuery实现鼠标可拖动调整表格列宽度

    jQuery实现鼠标可拖动调整表格列宽度

    实现鼠标可拖动调整表格列宽度 如图:  一.引入文件: 复制代码 代码如下: <script src="/js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/js/store.js" type="text/javascript"></script> <script src="

  • jquery实现拖动效果

    jquery实现拖动效果

    因为想实现相框的拖到,找了半天的原因愣是没有找到错误,所以,只能翻看源码了 如何实现拖动效果? 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事件,且鼠标在对象上方) 2.开始移动鼠标(触发onmousemove事件) 3.移动时更显对象的top和left值 4.鼠标放开停止拖动(触发onmouseup事件) 注意:拖动的对象必须是定位对象(即设置了position:absolute或 relative). 也就是说拖动事件=onmousedown事件+o

  • 利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

    利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

    原来我们要写一个客户端的特效,要写一两天的JavaScript,然后再调试一两天,才可以看见端倪.现在我们只要使用JQuery和他的 plugin,就可以任意的实现我们脑海中的特效,感谢他们的编写者对人类的贡献(一百个西红柿砸过来..............). 我今天实现的需求是一个需要从列表页面中选择要导出到word中的列,然后在将选中列的内容导出到word中,同时为了增加通用性,列的个数不是固定的,也就是说这张表格可能是4列,也可能是5列,待选择的列数目不固定.例如:有下面的一张表格,然后

  • jQuery 可以拖动的div实现代码 脚本之家修正版

    jQuery 可以拖动的div实现代码 脚本之家修正版

    当然,代码使用起来也非常的方便,很多东西就不用自己再去琢磨了. 研究的过程中顺便用jQuery实现了一个div的拖动,代码附于本文结尾. 实现的思路请参考我的可以拖动的DIV(二)一文. 在参考jQuery中文网站中的例子时,我发现他们在div窗口标题栏触发click事件时,将div的位置移上了一些,而mouseup的事件注册在整个div窗口上,这个思路让我很受启发,解决了鼠标移动很快而div不能跟上导致的错误,非常好的解决办法. 另外,请注意事件起泡,在jQuery以及任何实现div拖动的js

  • jquery div拖动效果示例代码

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • jquery sortable的拖动方法示例详解

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属

  • JQuery 表格操作(交替显示、拖动表格行、选择行等)

    JQuery 确实很方便,简单的代码,却能实现一些不错的功能. 复制代码 代码如下: <script type='text/javascript'><!--     $(function(){         //交替显示行         $('#alternation').click(function(){                             $('tbody > tr:odd', $('#example')).toggleClass('alternatio

随机推荐