jquery实现的div层拖动效果:
在实际应用中可能有需要所以拖动层这样的效果，可能不是太频繁，不过对代码的掌握并不是为了仅仅掌握此功能，而是对其中的代码有良好的应用把握，以此可以应用到其他功能中去，下面就介绍一下如何使用jquery实现此功能。
代码如下:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery实现的拖动层代码</title> <script type="text/javascript" src='/images/loading.gif' data-original="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><style type="text/css"> .box{ position:absolute; top:200px; left:400px; width:200px; height:200px; background:#8a9bca; cursor:move;} </style> <script type="text/javascript"> $(document).ready(function (e) { $(".box").mousedown(function (e) { iDiffX = e.pageX - $(this).offset().left; iDiffY = e.pageY - $(this).offset().top; $(document).mousemove(function (e) { $(".box").css({ "left": (e.pageX - iDiffX), "top": (e.pageY - iDiffY) }); }) }) $(".box").mouseup(function () { $(document).unbind("mousemove"); }) })</script> </head> <body> <div class="box" id="Drigging"></div> </body> </html>
以上代码实现了div随意拖动功能，下面简单介绍一下如何实现此功能。
一.实现原理:
原理非常的简单，当鼠标按下之后，会计算出鼠标指针的坐标然后减去div上边缘和下边缘距离网页上边和左边的距离，这样就计算出了鼠标指针距离div左边缘和上边缘的距离。当鼠标在div中拖动的时候将div的left和top属性值设置为当前鼠标的坐标减去之前计算出来的鼠标指针距离div左边缘和上边缘的距离，这样就实现了鼠标的拖动效果。
二.代码注释:
1.$(document).ready(function (e){},当文档结构加载完毕之后再去执行函数中的代码，e是事件对象。
2.$(".box").mousedown(function (e) {}，为div绑定mousedown事件处理函数，e是事件对象。
3.iDiffX = e.pageX - $(this).offset().left，计算出当前鼠标指针距离div左边缘的距离。
4.iDiffY = e.pageY - $(this).offset().top,计算出当前鼠标指针距离div上边缘的距离。
5.$(document).mousemove(function (e) { }，为document绑定mousemove事件处理函数，之所绑定到document是为了防止鼠标拖出div情况。
6.$(".box").css({ "left": (e.pageX - iDiffX), "top": (e.pageY - iDiffY) })，设置当前div的left和top属性值。
7.$(".box").mouseup(function () {}，为div绑定mousup事件处理函数。
8.$(document).unbind("mousemove")，解绑拖动事件。
三.推荐参阅:
1.jQuery的event.pageX属性一章节。
2. jQuery的offset()方法一章节。
3. jQuery的css()方法一章节。
4. jQuery的unbind()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8045
更多内容可以参阅:http://www.softwhy.com/jquery/
原标题：jquery实现的div层拖动效果
关键词：jquery
我知道了 