love19820823

浏览: 974431 次

最近访客更多访客>>

shengwei729

morelily

gxlit

fangpeng123456789

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1393)

社区版块

存档分类

2011-12 ( 97)
2011-11 ( 33)
2011-10 ( 26)
更多存档...

HTML5之拖动图片

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。

分享到：

JavaScript importScripts 之实现和用法 | HTML5之Worker用法

2011-11-29 18:46
浏览 752
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5之拖动图片

HTML5之鼠标拖动图片

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5之拖动图片

HTML5之鼠标拖动图片

评论

发表评论

相关推荐

最近访客更多访客>>