转自:http://blog.csdn.net/ubuntu64fan/article/details/7024504 感谢
<!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>HTML5 drag image in page - cheungmine</title> <style rel="stylesheet" type="text/css" > #_outerDiv{ height:150px; width:500px; border:1px solid black; position:relative; overflow:hidden; } </style> <script type="text/javascript"> function getElem (id) { return document.getElementById(id); } function trimPX (_px) { if(_px==null || _px=="") return 0; return parseInt(_px.substr(0,_px.lastIndexOf("px"))); } function hitInRect (hitX,hitY,rcLeft,rcTop,rcWidth,rcHeight) { return (hitX>=rcLeft && hitX<rcLeft+rcWidth && hitY>=rcTop && hitY<rcTop+rcHeight); } function outerDiv () { return getElem("_outerDiv"); } function imageDiv () { return getElem("_imageDiv"); } var dragging = false; var startTop = 0; // top is a Key Word in Chrome and Opera var startLeft = 0; var dragPosY = 0; var dragPosX = 0; window.addEventListener("load",initPage,false); function initPage () { outerDiv().addEventListener("mousedown",// start moving image function (event) { startTop = trimPX(imageDiv().style.top); startLeft = trimPX(imageDiv().style.left); var width = trimPX(imageDiv().style.width); var height = trimPX(imageDiv().style.height); if (hitInRect(event.clientX,event.clientY,startLeft,startTop,width,height)) { dragging = true; dragPosX = event.clientX; dragPosY = event.clientY; event.preventDefault(); // disable default behavior of browser } },false ); outerDiv().addEventListener("mousemove",// moving image function (event) { if (dragging){ imageDiv().style.cursor="pointer"; //imageDiv().style.top = parseInt(startTop)+(event.clientY - dragPosY) + "px"; imageDiv().style.top = "0px"; var dx = parseInt(startLeft)+(event.clientX - dragPosX); if(dx<0){ dx = 0; }else if(dx > 300){ //可拖动框宽度减去图片宽度 dx = 300; } imageDiv().style.left = dx + "px"; //imageDiv().style.left = parseInt(startLeft)+(event.clientX - dragPosX) + "px"; //alert(imageDiv().style.left); } event.preventDefault(); },false ); outerDiv().addEventListener("mouseup",// stop moving image function (event) { dragging = false; imageDiv().style.cursor="default"; event.preventDefault(); },false ); } </script> </head> <body> <div id="_outerDiv"> <div id="_imageDiv" style="z-index:0; position:relative; top:0px; left:0px; width:200px; height:150px;"> <img id="_imageObj" src="http://avatar.csdn.net/E/3/5/1_cheungmine.jpg"></img> </div> </div> </body> </html>