jquery 移动层
<%@ page language="java" contentType="text/html;charset=GBK"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动层</title>
<script type="text/javascript" src="../jquery/jquery-1.7.2.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 colspan="2">
? ? ? ? ? ? ? ? ?<textarea style="height:130px;width:375px"></textarea>
? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? </tr>
? ? ? ? </table>
?</div>
</div>
</body>
</html>
