随笔 - 154  文章 - 60  trackbacks - 0
<2007年12月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

声明:

该blog是为了收集资料,认识朋友,学习、提高技术,所以本blog的内容除非声明,否则一律为转载!!

感谢那些公开自己技术成果的高人们!!!

支持开源,尊重他人的劳动!!

常用链接

留言簿(3)

随笔分类(148)

随笔档案(143)

收藏夹(2)

其他

学习(技术)

观察思考(非技术)

搜索

  •  

最新评论

阅读排行榜

评论排行榜

代码:
<!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>
posted on 2007-12-06 11:32 lk 阅读(419) 评论(0)  编辑  收藏 所属分类: ajax&jshtml

只有注册用户登录后才能发表评论。


网站导航: