<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移動position層</title>
<script type="text/javascript" src="./js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.draggable=function(s){
if(this.size()>1) return this.each(function(i,o){$(o).draggable(s)});
var t=this,h=s?t.find(s):t,m={},to=false,
d=function(v){
v.stopPropagation();
m={ex:v.clientX,ey:v.clientY,x:t.css("position")=="relative"?parseInt(t.css("left")):t.position().left,y:t.css("position")=="relative"?parseInt(t.css("top")):t.position().top,fw:t.get(0).style.width,w:t.width()};
if(t.css("position")=="static") to={"left":m.x,"top":m.y};
$(document).mousemove(b).mouseup(e);
if(document.body.setCapture) document.body.setCapture();
debug(m)
},
b=function(v){t.css({"left":v.clientX-m.ex+m.x,"top":v.clientY-m.ey+m.y});},
e=function(v){
if(document.body.releaseCapture) document.body.releaseCapture();
$(document).unbind("mousemove").unbind("mouseup");
};
h.mousedown(d);
return t;
};
})(jQuery);
$(document).ready(function(){
$(".showmessage").draggable();
})
function debug(m){
//打印出對象所在頁面的具體位置
document.title="ex="+m.ex+" ey="+m.ey+" x="+m.x+" y="+m.y+" fw="+m.fw+" w="+m.w;
}
</script>
<style>
.showmessage { position:absolute;top:250px;left:25px;z-index:999;width:400px;height:180px; background:#CCC;cursor:move; }
</style>
</head>
<body>
<div style="position:relative">
<div class="showmessage">
<table>
<tr height="30px">
<td class="pl20">買家留言：</td>
<td class="tar pr10"><span class="close_infomation">X</span></td>
</tr>
<tr height="130px">
<td class="pl20" colspan="2">
<textarea style="height:130px;width:375px"></textarea>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>