HTML5之鼠标拖动图片


本文实现了在HTML5的页面里拖动图片。要点在于图片被imageDIV包含，通过鼠标事件修改imageDIV的位置。下面是全部HTML5代码：
cheungmine, 2011
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>HTML5 drag image in page - cheungmine</title>  
  6.   <style rel="stylesheet" type="text/css" >  
  7.     #_outerDiv{  
  8.       height:400px;  
  9.       width:500px;  
  10.       border:1px solid black;  
  11.       position:relative;  
  12.       overflow:hidden;  
  13.     }  
  14.   </style>  
  15.   <script type="text/javascript">  
  16.     function getElem (id) {  
  17.       return document.getElementById(id);  
  18.     }  
  19.   
  20.     function trimPX (_px) {  
  21.       if(_px==null || _px=="")  
  22.         return 0;  
  23.       return parseInt(_px.substr(0, _px.lastIndexOf("px")));  
  24.     }  
  25.   
  26.     function hitInRect (hitX, hitY, rcLeft, rcTop, rcWidth, rcHeight) {  
  27.       return (hitX>=rcLeft && hitX<rcLeft+rcWidth && hitY>=rcTop && hitY<rcTop+rcHeight);  
  28.     }  
  29.   
  30.     function outerDiv () {  
  31.       return getElem("_outerDiv");  
  32.     }  
  33.   
  34.     function imageDiv () {  
  35.       return getElem("_imageDiv");  
  36.     }  
  37.   
  38.     var dragging = false;  
  39.     var startTop = 0; // top is a Key Word in Chrome and Opera  
  40.     var startLeft = 0;  
  41.     var dragPosY = 0;  
  42.     var dragPosX = 0;  
  43.   
  44.     window.addEventListener("load", initPage, false);  
  45.   
  46.     function initPage () {  
  47.       outerDiv().addEventListener("mousedown", // start moving image  
  48.         function (event) {  
  49.           startTop = trimPX(imageDiv().style.top);  
  50.           startLeft = trimPX(imageDiv().style.left);  
  51.           var width = trimPX(imageDiv().style.width);  
  52.           var height = trimPX(imageDiv().style.height);  
  53.   
  54.           if (hitInRect(event.clientX, event.clientY, startLeft, startTop, width, height)) {  
  55.             dragging = true;  
  56.             dragPosX = event.clientX;  
  57.             dragPosY = event.clientY;  
  58.             event.preventDefault(); // disable default behavior of browser  
  59.           }  
  60.         },  
  61.         false  
  62.       );  
  63.   
  64.       outerDiv().addEventListener("mousemove", // moving image  
  65.         function (event) {  
  66.           if (dragging){  
  67.             imageDiv().style.cursor="pointer";  
  68.             imageDiv().style.top = parseInt(startTop)+(event.clientY - dragPosY) + "px";  
  69.             imageDiv().style.left = parseInt(startLeft)+(event.clientX - dragPosX) + "px";  
  70.           }  
  71.           event.preventDefault();  
  72.         },  
  73.         false  
  74.       );  
  75.   
  76.       outerDiv().addEventListener("mouseup", // stop moving image  
  77.         function (event) {  
  78.           dragging = false;  
  79.           imageDiv().style.cursor="default";            
  80.           event.preventDefault();  
  81.         },  
  82.         false  
  83.       );  
  84.     }  
  85.   </script>  
  86. </head>  
  87. <body>  
  88.   <div id="_outerDiv">  
  89.     <div id="_imageDiv" style="z-index:0; position:relative; top:0px; left:0px; width:200px; height:150px;">  
  90.       <img id="_imageObj" src="http://avatar.csdn.net/E/3/5/1_cheungmine.jpg"></img>  
  91.     </div>  
  92.   </div>  
  93. </body>  
  94. </html>  
本文在Chrome, FireFox,Opera测试通过。不支持IE。

相关内容