拖拽的实现

                                                              要实现拖拽元素必须调用四个函数
      A：onmouseover（作用：当鼠标移动到上面的时候，获得该元素，即把它赋给一个公共变量A，以便在鼠标放开的时候调用，每个要移动位置的元素都要调用）
      B：onmousedown（作用：当鼠标按下的时候，获得该元素赋给一个公共变量B，在鼠标移动的时候改变其位置和在鼠标放开的时候调用）
      C：onmousemove（作用：当鼠标移动的时候，改变公共变量B的位置）
      D：onmousedown（作用：当移动到另一个元素上面的时候，这时候会再次调用onmouseover，给公共变量A再次赋值，覆盖原来的值，这时候调用nsertBefore或者apendChild函数，交换公共变量A和公共变量B位置，这样就实现了拖拽，简单哦！呵呵）

 

<! 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: red;
 }
   </ style >
  </ head >
  < body >
   < div  id ="parentDiv"  class ="parentCss"  style ="width:100" >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 1" > one 1 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 2" > two 2 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 3" > three 3 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 4" > four 4 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 5" > five 5 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 6" > six 6 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 7" > seven 7 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 8" > eight 8 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 9" > nine 9 </ div >
    < div  class ="itemCss"  onmouseover ="InsertDiv(this)"  id  = "nine 10" > 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.appendChild(NullDiv,obj2);
  }
 }
 
//-->
   </ script >
  </ body >
</ html >