复制代 代码如下: 完美拖拽 <br>html, body { <br>overflow:hidden; <br>} <br>body, div, h2, p { <br>margin:0; <br>パディング:0; <br>} <br>ボディ { <br>color:#fff; <br>背景:#000; <br>フォント:12px/2 Arial; <br>} <br>p { <br>パディング:0 10px; <br>マージントップ:10px; <br>} <br>スパン { <br>color:#ff0; <br>パディング左:5px; <br>} <br>#box { <br>位置:絶対; <br>幅:300ピクセル; <br>高さ:150ピクセル; <br>背景:#333; <br>ボーダー:2px ソリッド #ccc; <br>トップ:150ピクセル; <br>左:400ピクセル; <br>マージン:0; <br>} <br>#box h2 { <br>高さ:25px; <br>カーソル:移動; <br>背景:#222; <br>border-bottom:2px ソリッド #ccc; <br>text-align:right; <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>}]; 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) false を返します; <br>var e=event || <br>var x=e.pageY-_y; <br>var maxL = $(ドキュメント) .width() - $box.outerWidth(); <br>var maxT = $(document).height() - $box.outerHeight(); <br>x = x 0: x; >x = x > maxL: x; <br>y = y >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>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> 点击回放拖動轨迹 ドラッグ: トップ: 左:
