html触摸屏中图片没有,触摸屏上拖动图片

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

触摸屏拖动图片

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);

}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

以上是编程之家为你收集整理的触摸屏上拖动图片全部内容，希望文章能够帮你解决触摸屏上拖动图片所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！