实现DIV拖动

Ajax的到来让B/S中的客户端中开发有火了一把，网上出现了很多优秀的开源框架和UI，比较著名了有prototype，YUI，GWT等，但很多时候发现这些东西很难用到你的系统之中，有时候你的系统仅仅需要实现一两个UI功能，如果把整个架构都引入进来是不现实的。所以很多时候是需要自己动手去做一些工作。
 
现在弹出窗口在B/S系统中很受青睐，它有美观性和易用性等诸多特点，比如我用的sina 博客登陆窗口就是应用了弹出窗口。以前我们做弹出窗口只用一个window.open()搞定，但后来发现这种窗口有很多弊端，首先是界面的美观性差，其次是与主页面的交互性差（只有一个window.opener引用主页面）。所以在开发过程中要自己动手做一些这方面的事情。
于是很多人选择了用Div来实现但出窗口功能，用css来控制外观。但是，这对开发人员提出更高要求：窗口的定位、拖动、与主页面的交互等。。。
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.winFrame{
 position:absolute;
 border: outset gray 1px;
 height:400;
 width:500;
}
.winTitle{
 position:absolute;
 border-bottom:1px solid black;
 
 width:100%;
 height:20px;
 cursor:move;
}
.winContent{
 position:absolute;
 top:30px;
 width:100%
 padding: 10px;
 overflow: auto;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
  function beginDrag(elem,event){
 var deltaX = event.clientX - parseInt(elem.style.left);
 var deltaY = event.clientY - parseInt(elem.style.top);
 document.attachEvent("onmousemove",moveHandler);
 document.attachEvent("onmouseup",upHandler);
 event.cancelBubble = true;
 event.returnValue = false;
 function moveHandler(e){
   if(!e)
       e = window.event;
   elem.style.left = (e.clientX - deltaX) + "px";
   elem.style.top = (e.clientY - deltaY) + "px";
   e.cancelBubble = true;
 }
 function upHandler(e){
  if(!e)
        e = window.event;
     document.detachEvent("onmousemove",moveHandler);
     document.detachEvent("onmouseup",upHandler);
        e.cancelBubble = true;
 }
  }
</SCRIPT>
</HEAD>
   <div class="winFrame" style="left:50px;top:50px;">
       <div class="winTitle" onmousedown="beginDrag(this.parentNode,event);"> 标题 </div>
    <div class="winContent">
      内容
       </div>
   </div>
<BODY>
</BODY>
</HTML>

 

 
 
posted @ 2016-03-17 12:56  SherlockHolmes  阅读(537)  评论(0)  编辑  收藏  举报