复制代码 代码如下: 完美拖拽 <BR>html, body { <BR>overflow:hidden; <BR>} <BR>body, div, h2, p { <BR>margin:0; <BR>padding:0; <BR>} <BR>body { <BR>color:#fff; <BR>background:#000; <BR>font:12px/2 Arial; <BR>} <BR>p { <BR>padding:0 10px; <BR>margin-top:10px; <BR>} <BR>span { <BR>color:#ff0; <BR>padding-left:5px; <BR>} <BR>#box { <BR>position:absolute; <BR>width:300px; <BR>height:150px; <BR>background:#333; <BR>border:2px solid #ccc; <BR>top:150px; <BR>left:400px; <BR>margin:0; <BR>} <BR>#box h2 { <BR>height:25px; <BR>cursor:move; <BR>background:#222; <BR>border-bottom:2px solid #ccc; <BR>text-align:right; <BR>padding:0 10px; <BR>} <BR>#box h2 a { <BR>color:#fff; <BR>font:12px/25px Arial; <BR>text-decoration:none; <BR>outline:none; <BR>} <BR> <BR>$(function(){ <BR>var bDrag = false; <BR>var _x,_y; <BR>var $box=$("#box") <BR>var aPos = [{ <BR>x: $("#box").offset().left, <BR>y: $("#box").offset().top <BR>}]; <BR>$("span:eq(1)").text(aPos[0].y); <BR>$("span:eq(2)").text(aPos[0].x); <BR>$("#box h2:first").mousedown(function(event){ <BR>var e=event || window.event; <BR>bDrag = true; <BR>_x=e.pageX-$box.position().left; <BR>_y=e.pageY-$box.position().top; <BR>return false <BR>}) <BR>$(document).mousemove(function(event){ <BR>if(!bDrag) return false; <BR>var e=event || window.event; <BR>var x=e.pageX-_x; <BR>var y=e.pageY-_y; <BR>var maxL = $(document).width() - $box.outerWidth(); <BR>var maxT = $(document).height() - $box.outerHeight(); <BR>x = x < 0 ? 0: x; <BR>x = x > maxL ? maxL: x; <BR>y = y < 0 ? 0: y; <BR>y = y > maxT ? maxT: y; <BR>$box.css({left:x,top:y}); <BR>aPos.push({ <BR>x: x, <BR>y: y <BR>}); <BR>status() <BR>return false <BR>}).mouseup(function(){ <BR>bDrag = false; <BR>status() <BR>return false <BR>}) <BR>$("#box h2:first a").click(function(){ <BR>if (aPos.length == 1) return; <BR>var timer = setInterval(function() { <BR>var oPos = aPos.pop(); <BR>oPos ? ($box.css({left : oPos.x + "px", top : oPos.y + "px"})) : clearInterval(timer) <BR>status(); <BR>},30); <BR>}).mousedown(function(){return false}) <BR>function status() { <BR>$("#box span:eq(0)").text(bDrag); <BR>$("#box span:eq(1)").text($box.position().top); <BR>$("#box span:eq(2)").text($box.position().left); <BR>} <BR>status() <BR>}) <BR> 点击回放拖动轨迹 Drag: top: left:
