HTML5之拖动图片

最新推荐文章于 2021-06-30 07:12:25 发布

iteye_702

最新推荐文章于 2021-06-30 07:12:25 发布

阅读量293

点赞数

文章标签： javascript ViewUI

HTML5之鼠标拖动图片

本文实现了在HTML5的页面里拖动图片。要点在于图片被imageDIV包含，通过鼠标事件修改imageDIV的位置。下面是全部HTML5代码：
cheungmine, 2011

<!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:400px; 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.left = parseInt(startLeft)+(event.clientX - dragPosX) + "px"; } 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>

本文在Chrome, FireFox,Opera测试通过。不支持IE。