拖动层的javasvript代码

< html >  
< body >  
< div id = " div1 "  style = " POSITION: absolute; LEFT: 0px; TOP: 0px; WIDTH: 356px;HEIGHT: 284px; BACKGROUND-COLOR: silver; "  
onmousedown = " down() "  onmousemove = " move() "  onmouseup = " up() " ></ div >  
< script >  
var  isdown  =   false  
var  beginx,beginy 
function  down() { 
isdown  =   true ; 
} 

function  move() { 
if  (isdown){ 
var  endx  =  event.clientX; 
var  endy  =  event.clientY; 
div1.style.left  =  parseInt( div1.style.left )  +  endx - beginx; 
div1.style.top  =  parseInt( div1.style.top )  +  endy - beginy; 
} 
beginx  =  event.clientX; 
beginy  =  event.clientY; 
} 

function  up() { 
isdown  =   false ; 
} 
document.body.onmousemove  =  move 
document.body.onmouseup  =  up 
</ script >  
</ body >  
</ html >

< html >

< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< title > 显示拖动层例子 </ title >
</ head >

< body >

< input type = button value = " 显示层 "  style = " position:absolute; left:15; top:18 "  onclick = " window.div1.style.display='' " >
< div id  =  div1 style = " position:absolute;z-index:1;display:none;width:148px;height=129px;background-color:#EEEEEE;border:1px solid black; left:90px; top:41px " >
< table border = " 1 "  width = " 100% "  id = " table1 "  cellspacing = " 0 "  cellpadding = " 0 "  style = " border-collapse: collapse "  bordercolorlight = " #808080 "  bordercolordark = " #808080 "  height = " 100% " >
< tr >
< td style = " font-size:9pt; "  bgcolor = " #C0C0C0 "  height = " 19 "  id  = divTitle style = " cursor:default; "  width = " 94% " > 拖动我看看 </ td >
< td onclick = " div1.style.display='none' "   style = " cursor:default "  bgcolor = " #808080 "  height = " 19 "  style = " cursor:default; "  width = " 5% "  bordercolor = " #000000 " >
< font color = " #FFFFFF " > × </ font ></ td >
</ tr >
< tr >
< td align = center colspan = " 2 " > 哈哈，可以拖动！
</ td >
</ tr >
</ table >
</ div >
< script language = " javascript " >
<!--
var  mX,mY,oX,oY;
window.divTitle.onmousedown = function (){
mX  =  parseInt(event.x, 10 );
mY  =  parseInt(event.y, 10 );
oX  =  parseInt(div1.style.left, 10 );
oY  =  parseInt(div1.style.top, 10 );

window.divTitle.setCapture();
window.divTitle.onmousemove = function (){
div1.style.left = oX  +  (parseInt(event.x, 10 )  - mX);
div1.style.top = oY  +  (parseInt(event.y, 10 ) - mY);
};
};
window.divTitle.onmouseup  =   function (){
divTitle.releaseCapture();
window.divTitle.onmousemove = null ;
}
// -->
</ script >
</ body >

</ html >

转载于:https://www.cnblogs.com/jenry/archive/2007/06/26/795671.html