MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理

- 中国WEB开发者网络 (http://www.webasp.net)
-- 技术教程 (http://www.webasp.net/article/)
--- MicroSoft Live 和GOOGLE个性主页 页面元素可拖拽放置的实现原理 (http://www.webasp.net/article/29/28081.htm)
-- 作者:未知
-- 发布日期: 2007-01-08

基本上MSN、MicroSoft Live 和GOOGLE个性主页 元素可拖动并放置的的实现原理就是对DOM的操作再加上JAVASCRIPT拖动元素。实现起来实际上并不难,但是要做到很美观并符合用户习惯就需要一些时间思考了。

以下代码实现了上述功能,虽然很简单,但是基本上说明了原理。实现更高级的功能当然还需要改进。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
 <head>
  <title>DropLayer2</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
  <style type="text/css">
    div
 {
  border-right: lightgrey thin solid;
  border-top: lightgrey thin solid;
  font-weight: bold;
  z-index: 2;
  text-transform: capitalize;
  border-left: lightgrey thin solid;
  color: white;
  border-bottom: lightgrey thin solid;
  background-color: dimgray;
 }
  </style>
 </head>
 <body>
  <div id="parentDiv" class="parentCss" style="width:100">
   <div class="itemCss" onmouseover="InsertDiv(this)">one 1</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">two 2</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">three 3</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">four 4</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">five 5</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">six 6</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">seven 7</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">eight 8</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">nine 9</div>
   <div class="itemCss" onmouseover="InsertDiv(this)">ten 10</div>
  </div>
  <script language="javascript">
<!--

 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>


webasp.net