JavaScript实现AJAX的拖动效果-例子1

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > drag layer </ title >
< style >
body,table{color:#000000;
    font-size:12px;
}
div.div_one{}
.dragBar{color:#FFFFFF;
    font-weight:bold}
</ style >
< script  language ="javascript"  defer >
/*written by joelee@51js
*/
    var tmpElement=null;
    var dragElement=null;
    var downX,downY,tmp_o_x,tmp_o_y;
    var refElement=null;
    var dragActive=0;
    var draging=0;
function readyDrag(){
    dragActive=1;
    if(event.srcElement.tagName!="DIV")
        return;
    dragElement=event.srcElement.parentNode;
    tmpElement=dragElement.cloneNode(true);
    tmpElement.style.filter="alpha(opacity=90)";
    tmpElement.style.zIndex=2;
    dragElement.style.zIndex=1;
    tmpElement.style.position="absolute";
    if(dragElement.parentNode.tagName!="BODY"){
        dragElement.style.left=dragElement.offsetLeft+dragElement.parentNode.style.pixelLeft;
        dragElement.style.top=dragElement.offsetTop+dragElement.parentNode.style.pixelTop;
    }
    downX=event.clientX;
    downY=event.clientY;
    tmp_o_x=dragElement.style.pixelLeft;
    tmp_o_y=dragElement.style.pixelTop;
    tmpElement.style.visibility="hidden";
    document.body.appendChild(tmpElement);
    document.onmousemove=startDrag;
    }
    document.onmouseup=endDrag;
function startDrag(){
    if(dragActive==1&&event.button==1&&dragElement!=null&&tmpElement!=null){
        tmpElement.style.visibility="visible";
        tmpElement.style.left=tmp_o_x+event.clientX-downX;
        tmpElement.style.top=tmp_o_y+event.clientY-downY;
        dragElement.style.backgroundColor="#CCCCCC";
        document.body.style.cursor="move";
        draging=1;
    }
}
function endDrag(){
    if(dragActive==1&&tmpElement!=null){
        if(draging==1){
            dragElement.removeNode(true);
            draging=0;
        }
        tmpElement.style.filter="alpha(opacity=100)";
        tmpElement.style.zIndex=1;
        document.body.style.cursor="default";
        if(refElement!=null&&refElement.parentNode!=null&&refElement.parentNode.tagName!="BODY"){
            tmpElement.style.width=refElement.parentNode.style.width;
            tmpElement.style.position="";
            refElement.parentNode.insertBefore(tmpElement,refElement);
        }
    }
    dragElement=null;
    tmpElement=null;
    dragActive=0;
}
function readyInsert(){
    if(dragActive==1){
        var element=event.srcElement;
        if(element==dragElement)return;
        if(element.tagName!="DIV")
            return;
        if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
            element=element.parentNode;
        element.style.backgroundColor="#CCCCCC";
        element.style.filter="alpha(opacity=50)";
        refElement=element;
    }
}
function failInsert(){
    var element=event.srcElement;
    if(element.tagName!="DIV")
        return;
    try{
        if(element.className=="dragBar"||element.className=="textSheet"||element.className=="blankBar")
            element=element.parentNode;
    }catch(e){}
    element.style.filter="alpha(opacity=100)";
    element.style.backgroundColor="#FFFFFF";
    refElement=null;
}
document.onselectstart=function(){return false}
</ script >
</ head >

< body >
< div  id ="div_one"  class ="div_one"  style ="position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert()" >
   < div  onMouseDown ="readyDrag()"  style ="cursor:move; border:1px solid #996666; background-color:#996666; height:20px"  name ="dragDIV"  class ="dragBar" >< img  src ="snap_icon.gif"  width ="16"  height ="16" > Window </ div >
< div  class ="textSheet"  style ="border:1px solid #996666;" > Content < br >
  Content < br >
  Content < br >
  Content   < br >
</ div >
< div  class ="blankBar"  style ="height:10px" ></ div ></ div >
< div  id ="grid1"  style ="position:absolute; left:534px; top:37px; width:336px; height:15px; z-index: 100; visibility: visible;" >
   < div  style ="height:20px;z-index:2;"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert();" > 把层拖动到这儿 </ div >
</ div >
< div  id ="grid2"  style ="position:absolute; left:20px; top:40px; width:494px; height:15px; z-index: 100; visibility: visible;" >
   < div  style ="height:20px;z-index:2; background-image:url()"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert();" > 把层拖动到这儿 </ div >
</ div >
< div  id ="div_one"  class ="div_one"  style ="position:absolute; left:204px; top:277px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert()" >
   < div  onMouseDown ="readyDrag()"  style ="cursor:move; border:1px solid #996666; background-color:#996666; height:20px"  name ="dragDIV"  class ="dragBar" >< img  src ="snap_icon.gif"  width ="16"  height ="16" > BBS </ div >
   < div  class ="textSheet"  style ="border:1px solid #996666;" > Content </ div >
   < div  class ="blankBar"  style ="height:10px" ></ div >
</ div >
< div  id ="div_one"  class ="div_one"  style ="position:absolute; left:561px; top:195px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert()" >
   < div  onMouseDown ="readyDrag()"  style ="cursor:move; border:1px solid #996666; background-color:#996666; height:20px"  name ="dragDIV"  class ="dragBar" >< img  src ="snap_icon.gif"  width ="16"  height ="16" > Log </ div >
   < div  class ="textSheet"  style ="border:1px solid #996666;" > Content < br >
    Content < br >
    Content     < br >
  Content < br >
</ div >
   < div  class ="blankBar"  style ="height:10px" ></ div >
</ div >
< div  id ="div_one"  class ="div_one"  style ="position:absolute; left:438px; top:74px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert()" >
   < div  onMouseDown ="readyDrag()"  style ="cursor:move; border:1px solid #996666; background-color:#996666; height:20px"  name ="dragDIV"  class ="dragBar" >< img  src ="snap_icon.gif"  width ="16"  height ="16" > Worker </ div >
   < div  class ="textSheet"  style ="border:1px solid #996666;" > Content </ div >
   < div  class ="blankBar"  style ="height:10px" ></ div >
</ div >
< div  id ="div_one"  class ="div_one"  style ="position:absolute; left:206px; top:406px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF;"  onMouseOver ="readyInsert()"  onMouseOut ="failInsert()" >
   < div  onMouseDown ="readyDrag()"  style ="cursor:move; border:1px solid #996666; background-color:#996666; height:20px"  name ="dragDIV"  class ="dragBar" >< img  src ="snap_icon.gif"  width ="16"  height ="16" > Tools </ div >
   < div  class ="textSheet"  style ="border:1px solid #996666;" > Content </ div >
   < div  class ="blankBar"  style ="height:10px" ></ div >
</ div >
</ body >
</ html >