HTML5之鼠标拖动图片

转自：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>

HTML5之鼠标拖动图片

相关文章