javascript - touchmove控制一个区域左右拖动
黄舟
黄舟 2017-04-11 10:23:08
[JavaScript讨论组]
        //获取需要活动的区域
        var seckillul=document.getElementById('seckillul');
        
        seckillul.style.webkitTransform='translate3d('+0+'px,0,0)';

        var touchStart=function (evt){
            var seckillul=document.getElementById('seckillul');
            startX=evt.touches[0].pageX;

            console.log("手指按下的位置:"+seckillul.style.webkitTransform);

            offsetX=0;

            // 正则获取translate3d当前x轴的px

            var re=seckillul.style.webkitTransform.match(/\((.+),(.+),(.+)\)/);
            var re2=re[1].match(/-?[0-9]*[0-9]*[0-9]/);
            nowEleX=re2[0];
        };

        var touchMove=function (evt){

            evt.preventDefault();

            //偏移量
            offsetX=evt.targetTouches[0].pageX - startX;

            var seckillul=document.getElementById('seckillul');
            
            //我知道这里并不可以这样写,但是不知道怎么处理↓
            seckillul.style.webkitTransform='translate3d('+(nowEleX+offsetX)+'px,0,0)';
                        
            };

        var touchEnd=function (evt){
            evt.preventDefault();
        };

        seckillul.addEventListener("touchstart", touchStart, false);
        seckillul.addEventListener("touchmove", touchMove, false);
        seckillul.addEventListener("touchend", touchEnd, false);

第一次来回拖动正常,但第二次再拖动,translate3d的值又变成的偏移量的值,比如我第一次拖动了200px;第二次拖动的时候,translate3d的值变成了偏移量的值,整个区域的位置往前返回了。

请问该怎么处理呢

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(1)
PHP中文网

拖曳,为啥不试试dragdrop!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号