HTML5之鼠标拖动图片

最新推荐文章于 2024-04-09 17:34:36 发布

jswm20150115

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量1w

点赞数 1

分类专栏：网站前端开发文章标签：图片拖拽 html5

网站前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

jswm20150115

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
HTML5之鼠标拖动图片

HTML5 drag image in page - cheungmine #_outerDiv{ height:150px; width:500px; border:1px solid black; position:relative; overflow:hidden; } function g
复制链接

扫一扫