关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题

简介: 写这个么个题目好像,有点晦涩。直接来张gif图就知道,主要是是当手指触摸到元素时,元素的初始位置变成了left:0, top:0; js 设置监听事件 都是 一样的套路  touch.

写这个么个题目好像,有点晦涩。直接来张gif图就知道,主要是是当手指触摸到元素时,元素的初始位置变成了left:0, top:0;



js 设置监听事件 都是 一样的套路 

touch.addEventListener('touchstart', function(evtend) {}, false);
touch.addEventListener('touchmove', function(evtend) {}, false);
touch.addEventListener('touchend', function(evtend) {}, false);


在事件里添加 进行位置的动态改变,首先就需要获得手指的初始位置,手指移动的位置,手机touch 当前元素的位置;

            var endpst = {}, //结束位置
                elepst= {}, 
                start={}; //初始位置

            item.addEventListener('touchstart', function(event) {
                if(event.targetTouches.length > 1) return;
                var offset, touch = event.targetTouches[0],
                    style = window.getComputedStyle(this, null);// 当前元素的css 样式

                    start = {x: touch.clientX, y: touch.clientY};
                    elepst = {
                        x: parseFloat(style.getPropertyValue('left')), 
                        y: parseFloat(style.getPropertyValue('top')),
                    };
            }, false);

            item.addEventListener('touchmove', function(event) {
                if(event.targetTouches.length > 1) return;
                
                var touch = evtmv.targetTouches[0],
                    offset = { x : touch.clientX - start.x, y : touch.clientY - start.y }; //手移动的 偏移位置

                endpst['left'] = elepst.x + offset.x;
                endpst['top'] = .y + offset.y;

                this.style.left = endpst.left+ 'px';
                this.style.top = endpst.top + 'px';
            }, false);
            //移动结束
            item.addEventListener('touchend', function(e) {
                if(e.targetTouches.length > 1) return;

            }, false);


这样写在安卓和电脑上是没问题的, 但到了水果上状况如上图,操作后,在第一次移动时,位置变成0,再次操作位置就是和手机的运动是一样的。

分析,初始化页面时,position,是读取css文件渲染的况且是百分比定位。第二次移动时,position在元素属性上

由此 最直接办法就是 给每个需要移动的 元素 用js 设置位置。

    var ary = document.querySelectorAll(eles)
    for (var k = start , itm; itm = ary[k++];) {
        var left = itm.getBoundingClientRect().left,
            top = itm.getBoundingClientRect().top;
        itm.style.cssText = 'top:' + top + 'px;left:' + left +'px';
    }

如此 当在水果上第一次触摸拖动元素时 ,位置就不会为0。

getBoundingClientRect有个尴尬的地方就是,eles 元素和父类元素 即所在分页吧,必须可见,才有值否则为0;




有需要的交流的可以加个好友


相关文章
「镁客早报」苹果将在德国停售iPhone 7&8;“刘强东事件”正式结案
受影响的 iPhone主要是采用了Intel和Qorvo(美国的一家射频IC厂商)的芯片。
648 0
|
安全 iOS开发
苹果发布五个iPhone和iPod Touch系统补丁
2月4日消息,据国外媒体报道,苹果本周二发布了五个iPhone和iPod Touch系统补丁,修复了几个可以允许攻击者遥控控制这些设备的漏洞。 据苹果公司透露,一旦iPhone或者iPod Touch用户打开恶意的音频或者图像文件,或者访问了一个恶意FTP(文件传输协议)服务器,其中的三个漏洞就可能允许他人通过运行代码来实现远程控制用户的设备。
797 0
苹果手机什么日程安排提醒软件可以事件备忘和随时提醒?
苹果手机上什么日程安排提醒软件可以事件备忘和随时提醒? iPhone手机上有备忘录用来事件备忘,有提醒事项可以日程提醒,iPhone手机上想用一款集备忘与提醒于一体的桌面日程安排提醒软件,可以添加云便签敬业签苹果手机版使用。
1866 0
|
iOS开发
微信成为首批支持iPhone 6s /Plus 上 3D Touch 功能的 App
2015苹果新品发布会上微信成为首批支持iPhone 6s 和 iPhone 6s Plus 上 3D Touch 功能的 App。通过 3D Touch,微信用户将可以通过更精减的操作完成基本任务,包括新建聊天,录制小视频,显示我的二维码或免打扰一小时。
929 0