jquery实现的div层拖动效果

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="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/

爱程序网

Tags：[db:关键字]