复代码码 代码如下: <머리> 完美拖拽 <br>html, body { <br>overflow:hidden; <br>} <br>body, div, h2, p { <br>margin:0; <br>패딩:0; <br>} <br>본체 { <br>색상:#fff; <br>배경:#000; <br>글꼴:12px/2 Arial; <br>} <br>p { <br>padding:0 10px; <br>여백 상단:10px; <br>} <br>스팬 { <br>색상:#ff0; <br>왼쪽 패딩:5px; <br>} <br>#box { <br>위치:절대; <br>너비:300px; <br>높이:150px; <br>배경:#333; <br>테두리:2px 단색 #ccc; <br>상단:150px; <br>왼쪽:400px; <br>여백:0; <br>} <br>#box h2 { <br>높이:25px; <br>커서:이동; <br>배경:#222; <br>테두리 하단:2px 솔리드 #ccc; <br>텍스트 정렬:오른쪽; <br>패딩:0 10px; <br>} <br>#box h2 a { <br>color:#fff; <br>글꼴: 12px/25px Arial; <br>텍스트 장식:없음; <br>개요:없음; <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>false 반환 <br>}) <br>$(document).mousemove(function(event){ <br>if(!bDrag) return false; <br>var e=event || window.event; <br>var y=e.pageY-_y; .width() - $box.outerWidth(); <br>var maxT = $(document).height() - $box.outerHeight() <br>x = x < 0: x; >x = x > maxL: x; <br> 0 ? 0: y <br> maxT: y :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> false 반환 <br>}) <br>$("#box h2:first a").click(function (){ <br>if (aPos.length == 1) return; <br>var 타이머 = 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>$("#boxspan:eq(0)").text(bDrag); <br>$("#boxspan:eq(1)").text($box.position().top); <br>$("#boxspan:eq(2)").text($box.position().left); <br>} <br>status() <br>}) <br> <본문> 点击回放拖动轨迹 드래그: 상단:<스팬> 왼쪽:<스팬>
