HTML：

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } #box{ width:500px; border:1px solid #888; position:absolute; } #handler{ height:25px; line-height:25px; padding:0 10px; cursor:pointer; border-bottom:1px solid #888; } .content{ height:200px; } #show{ position:absolute; right:0; top:0; } </style> </head> <body>
触点
内容
</body> </html>

JS：

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 x=e.pageX;

var y=e.pageY;

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 x=e.pageX;

var y=e.pageY;

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="弹起";

}

}