你的位置:首页 > Java教程

[Java教程]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/