您的位置：网站首页 > 网络营销 > 网站制作 > 触摸屏上拖动图片
触摸屏上拖动图片
来源： 日期：2015-11-01 22:08:41 人气：标签： 
本文实例讲述了触摸屏上拖动图片。分享给大家供大家参考。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>触摸屏拖动图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
function info(text) {
document.getElementById("info").innerText = "调试信息:"+text;
}
function dragStart(e) {
var e = e || window.event;
var mypic = document.getElementById("mypic");
mypic['ori_x'] = e.targetTouches[0].clientX;
mypic['ori_y'] = e.targetTouches[0].clientY;
mypic['ori_left'] = parseInt(mypic.style.left);
mypic['ori_top'] = parseInt(mypic.style.top);
info("touch start");
}
function dragMove(e){
e.preventDefault(); //避免默认的事件处理
var e = e || window.event; //获取真实的事件变量
var myElement = e.srcElement || e.target; //获取事件的源DOM
var mypic = document.getElementById("mypic");
mypic['draging'] = true;
myElement.ontouchend= function(){
mypic['draging'] = false;
info("touch end");
}
document.ontouchmove= function(eMove){
var eMove = eMove || window.event;
info("touch move");
if(mypic['draging'] == true){
myElement.style.left = eMove.targetTouches[0].clientX - mypic['ori_x'] + mypic['ori_left'] + "px";
myElement.style.top = eMove.targetTouches[0].clientY - mypic['ori_y'] + mypic['ori_top'] + "px";
return false;
}
}
}
//当网页加载好以后就为图片拖动定义事件
window.onload = function(){
var mypic = document.getElementById("mypic");
mypic['draging'] = false;
mypic.addEventListener('touchstart', dragStart, false);
mypic.addEventListener('touchmove', dragMove, false);
}
</script>
</head>
<body>
<h1 id="info"></h1>
<img id="mypic" style="left:80px;top:80px;position:absolute" src="251fa713397f73327093f5c7e131bfd4.jpg" />
</body>
</html>
相关文章
- 上一篇： 精美漂亮网站引导页模板源码
- 下一篇： table的第一行实现拖拽
0731-85579057 ，
