HTML：
CSS：
#handler{
height:25px;
line-height:25px;
padding:0 10px;
cursor:move;
border-bottom:1px solid #888;
background:#eee;
}
.content{
height:180px;
padding:10px;
background:#fff;
}
#show{
position:absolute;
right:0;
top:0;
}
JS：
<script>
function $(id){
return document.getElementById(id);
}
var handler=$("handler");
var box=$("box");
var show=$("show");
var move=false;
var posX=0;
var posY=0;
handler.onmousedown=function(e){
move=true;
var e=e||window.event;
var x=e.pageX||e.clientX;
var y=e.pageY||e.clientY;
var ox=box.offsetLeft;
var oy=box.offsetTop;
var px=x-ox;
var py=y-oy;
posX=px;
posY=py;
//window.captureEvents(e)
//window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.onmousemove=function(e){
if(!move){
return false;
}
var e=e||window.event;
var x=e.pageX||e.clientX;
var y=e.pageY||e.clientY;
var ox=box.offsetLeft;
var oy=box.offsetTop;
var px=x-ox;
var py=y-oy;
show.innerHTML="x:"+x+"-y:"+y;
box.style.left=x-posX+"px";
box.style.top=y-posY+"px"
}
document.onmouseup=function(e){
move=false;
//window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
show.innerHTML="弹起";
}
}
</script>
Comments(0)