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 >
本文转自博客园执着的笨蛋的博客,原文链接:JavaScript实现AJAX的拖动效果-例子1 ,如需转载请自行联系原博主。
目录
相关文章
|
2月前
|
JavaScript
Vue3 + Js 指定位置进行拖动
Vue3 + Js 指定位置进行拖动
|
2月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
3月前
|
XML JSON 前端开发
深入了解JavaScript中的AJAX和HTTP请求
深入了解JavaScript中的AJAX和HTTP请求
|
1天前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
13 0
|
1天前
|
XML 前端开发 JavaScript
node.js第三天-----ajax(3)
node.js第三天-----ajax(3)
17 0
|
1天前
|
JSON JavaScript 前端开发
node.js第三天-----ajax(2)
node.js第三天-----ajax(2)
14 0
|
1天前
|
JSON 前端开发 JavaScript
node.js第三天-----ajax(1)
node.js第三天-----ajax(1)
22 0
|
2月前
|
XML JSON 前端开发
|
2月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
16 0
|
3月前
|
XML 前端开发 JavaScript
JavaScript高级主题:什么是 AJAX?如何使用它?
JavaScript高级主题:什么是 AJAX?如何使用它?
45 0

相关产品

  • 云迁移中心