Linux教程網 >> Linux編程 >> Linux編程 >> HTML5之鼠標拖動圖片

HTML5之鼠標拖動圖片

日期：2017/3/1 10:51:18 编辑：Linux編程

本文實現了在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。