jQuery实现的div任意拖动代码实例

jQuery实现的div任意拖动代码实例:
在某些实际的应用中，可能会用到拖动效果，下面是这方面非常好的一个代码实例，并且还能够回放拖动的轨迹。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>div拖动效果代码-蚂蚁部落</title>
<style type="text/css">
html,body{
  overflow:hidden;
}
body,div,h2,p{
  margin:0;
  padding:0;
}
body{
  color:#fff;
  background:#000;
  font:12px/2 Arial;
}
p{
  padding:0 10px;
  margin-top:10px;
}
span{
  color:#ff0;
  padding-left:5px;
}
#box{
  position:absolute;
  width:300px;
  height:150px;
  background:#333;
  border:2px solid #ccc;
  top:150px;
  left:400px;
  margin:0;
}
#box h2{
  height:25px;
  cursor:move;
  background:#222;
  border-bottom:2px solid #ccc;
  text-align:right;
  padding:0 10px;
}
#box h2 a{
  color:#fff;
  font:12px/25px Arial;
  text-decoration:none;
  outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  var bDrag=false; 
  var _x,_y; 
  var $box=$("#box") 
  var aPos=[{x: $("#box").offset().left,y: $("#box").offset().top}]; 
  $("span:eq(1)").text(aPos[0].y); 
  $("span:eq(2)").text(aPos[0].x); 
  $("#box h2:first").mousedown(function(event){ 
    var e=event || window.event; 
    bDrag = true; 
    _x=e.pageX-$box.position().left; 
    _y=e.pageY-$box.position().top; 
    return false 
  }) 
  $(document).mousemove(function(event){ 
    if(!bDrag) return false; 
    var e=event || window.event; 
    var x=e.pageX-_x; 
    var y=e.pageY-_y; 
    var maxL = $(document).width() - $box.outerWidth(); 
    var maxT = $(document).height() - $box.outerHeight(); 
    x = x < 0 ? 0: x; 
    x = x > maxL ? maxL: x; 
    y = y < 0 ? 0: y; 
    y = y > maxT ? maxT: y; 
    $box.css({left:x,top:y}); 
    aPos.push({ 
      x: x, 
      y: y 
    }); 
    status() 
    return false 
  }).mouseup(function(){ 
    bDrag = false; 
    status() 
    return false 
  }) 
  $("#box h2:first a").click(function(){ 
    if(aPos.length == 1) return; 
    var timer = setInterval(function() { 
      var oPos = aPos.pop(); 
      oPos?($box.css({left:oPos.x+"px",top:oPos.y+"px"})):clearInterval(timer) 
      status(); 
    },30); 
  }).mousedown(function(){return false}) 
  function status(){ 
    $("#box span:eq(0)").text(bDrag); 
    $("#box span:eq(1)").text($box.position().top); 
    $("#box span:eq(2)").text($box.position().left); 
  } 
  status() 
}) 
</script>
</head>
<body>
<div id="box">
  <h2><a href="javascript：;">点击回放拖动轨迹</a></h2>
  <p>Drag:<span></span></p>
  <p>top:<span></span></p>
  <p>left:<span></span></p>
</div>
</body>
</html>

以上代码实现了我们的要求，并且能够回放div的拖动轨迹，算是非常好的一个代码实例，下面简单介绍一下此效果的实现过程:
一.实现原理:
当鼠标在div中按下的时候的时候，会将标识变量bDrag赋值为true，这样当鼠标拖动的时候会执行注册在document上的mousemove事件处理函数，否则的会就会很快跳出，之所以将事件注册在document上，是利用了事件冒泡原理，否则有可能在拖动过程中鼠标会移出div。如何实现拖动:当鼠标在div中按下的时候，首先会获取当前鼠标指针距离div上边缘和下边缘的距离，当鼠标拖动的时候，然后使用鼠标在文档中的作用表值减去之前获取的鼠标指针距离上边缘和下边缘的距离，并将这个值作为div的left和top属性值。关于回放:就是将mousemove每次事件触发时的坐标放入数组，点击回放的时候就是，就是将数组的坐标值一一取出设置为div的坐标，只不过顺序相反，这样就实现了回放。
二.相关阅读:
1.offset()函数可以参阅jQuery的offset()方法一章节。
2.text()函数可以参阅jQuery的text()方法一章节。
3.mousedown事件可以参阅jQuery的mousedown事件一章节。
4.position()函数可以参阅jQuery的position()方法一章节。
5.pageX可以参阅jQuery的event.pageX属性一章节。
6.pageY可以参阅jQuery的event.pageY属性一章节。
7.width()函数可以参阅jQuery的width()方法一章节。
8.outerWidth()函数可以参阅jQuery的outerWidth()方法一章节。
9.push()函数可以参阅JavaScript的Array对象的push()方法一章节。
10.setInterval()函数可以参阅setInterval()函数用法详解一章节。
11.pop()函数可以参阅JavaScript的Array对象的pop()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9038

更多内容可以参阅:http://www.softwhy.com/jquery/

爱程序网

Tags：[db:关键字]