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

基本上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 >