页面元素可拖拽放置的实现原理

 var obj,obj2;  //引发事件对象
 var rootNode;     //控制对象根节点

 var IsDrag=false;   //是否抓起
 
 var NullDiv;  //空临时层
 
 var x,y;   //鼠标与控件的相对坐标
 
 window.onload = Prepare; //窗体加载时委托到Prepare
  
 function Prepare()
 {
  //生成临时层，并设置其属性
  NullDiv = document.createElement("div");
     
  //获得控制对象的根节点元素
  rootNode = document.getElementById("parentDiv");
  
  document.onmousemove=MoveIt; //当鼠标在文档上移动时事件委托到MoveIt
  
  document.onmousedown=Drag;   //当鼠标按下时事件委托到Drag
  
  document.onmouseup=Release;  //当鼠标释放台起时事件委托到Release
  
  
 } 
  
 function Drag()
 {
 
  obj = event.srcElement;
  
  x=0;//event.offsetX;
  y=0;//event.offsetY;
    
  obj.style.position='absolute';
  
  obj.style.posTop=event.y-y;
  obj.style.posLeft=event.x-x;
    
  IsDrag=true;
 }
 
 function MoveIt()
 {
  //window.status = event.x+"|"+event.y+"|"+IsDrag+"|"+x+"|"+y;
  
  if(IsDrag)
  {
   obj.style.posTop=event.y-y;
   obj.style.posLeft=event.x-x;
  }
 }
 
 function Release()
 {
  IsDrag=false;
  
  NullDiv.style.display='none';
  
  obj.style.position='';
  
  rootNode.insertBefore(obj,obj2);
 }
 
 function InsertDiv(o)
 {
  if(IsDrag)
  { 
   obj2=o;
   NullDiv.style.display='';
   NullDiv.style.height='18';
   NullDiv.style.width='100';
   rootNode.insertBefore(NullDiv,obj2);
  }
 }
 
//-->
  </script>
 </body>
</html>