jquery移动浮动层

<!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>
 

本文出自 “前端开发” 博客,谢绝转载!

你可能感兴趣的:(jquery,职场,休闲,血洗)