本文實現了在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。