
下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家,也给大家做个参考。
<!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" src="251fa713397f73327093f5c7e131bfd4.jpg" /></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的触摸屏上拖动图片全部内容,希望文章能够帮你解决触摸屏上拖动图片所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)