HTML5之鼠标拖动图片
本文实现了在HTML5的页面里拖动图片。要点在于图片被imageDIV包含，通过鼠标事件修改imageDIV的位置。下面是全部HTML5代码：
cheungmine, 2011本文在Chrome, FireFox,Opera测试通过。不支持IE。
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>
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15