×

普及下移动页面中拖动效果的知识

作者:andy0012018.04.25来源:Web前端之家浏览:26230评论:0
关键词:移动拖拽

普及下页面中拖动效果的知识。在我还不知道怎么做移动端的手势操作的时候,我觉得这TM实在是太难了,这是多么高深的学问啊,手势操作耶,上滑下滑左滑右滑的,手机怎么知道我是怎么滑的,我要怎么告诉手机,我用手滑了一下,于是我就默默的找资料看看,

到底是什么样的原理可以实现这一点,于是,我找到了移动端手势操作原生事件:

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表:

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表,尽量使用这个代替touches

看到他们,我简直心生喜悦啊,简直了,这不就是我苦苦寻觅的东西吗?手机再也不用担心我的手指在干什么了!

有了上面的这些原始事件,我们能做什么事情呢?

1、通过touches,我们可以知道屏幕上有几根手指,那就可以自定义一根手指做什么,两根手指做什么,三根手指又做什么;

2、我们可以通过手指在屏幕接触的时间,来自定义轻触,模拟点击,长按,双击等等效果,当然这就比较高级了;

3、可以自定义上滑下滑左滑右滑等手势效果;

4、可以模拟滚动条效果;

5、可以实现手指拖拽效果;

。。。。。。

等等,可以实现很多你想要实现的效果,只要你敢想,当然今天要讲解的并不是移动端手势操作这么大的话题,今天就从手指拖拽效果这一个小点开始,以后慢慢介绍移动端的那些事。

移动端的拖拽思想跟pc端很像,区别只是写法不一样,具体的实现原理我就不说了,不理解的请看PC端的介绍,PC端没有用到绑定事件,其实也是可以用绑定事件来绑定的,

移动端需要用绑定事件来触发,具体代码如下:

/*    参数说明:
    元素绝对定位,父级相对定位,如果父级为window,则可以不用
    传一个参数,表示父级为window,物体相对于window范围拖动
    传2个参数,则父级为第二个参数,物体相对于父级范围拖动
    参数为id值
*/
function drag(obj,parentNode){
    var obj = document.getElementById(obj);
    if(arguments.length == 1){
        var parentNode = window.self;  
        var pWidth = parentNode.innerWidth,pHeight = parentNode.innerHeight;   
    }else{
        var parentNode = document.getElementById(parentNode);
        var pWidth = parentNode.clientWidth,pHeight = parentNode.clientHeight;
    }
    obj.addEventListener('touchstart',function(event){
        //当只有一个手指时              .
        if(event.touches.length == 1){
            //禁止浏览器默认事
            event.preventDefault();
        };
        var touch = event.targetTouches[0];
        var disX = touch.clientX - obj.offsetLeft,disY = touch.clientY - obj.offsetTop;
        var oWidth = obj.offsetWidth,oHeight = obj.offsetHeight;
 
        obj.addEventListener('touchmove',function(event){
            var touch = event.targetTouches[0];
            obj.style.left = touch.clientX - disX  + 'px';
            obj.style.top = touch.clientY - disY + 'px';
            //左侧
            if(obj.offsetLeft <=0){
                obj.style.left = 0;
            };
            //右侧
            if(obj.offsetLeft >= pWidth -oWidth){
                obj.style.left =  pWidth - oWidth + 'px';  
            };
            //上面
            if(obj.offsetTop <= 0){
                obj.style.top = 0; 
            };
            //下面
            if(obj.offsetTop >= pHeight - oHeight){
                obj.style.top =  pHeight - oHeight + 'px'; 
            };                 
        });
        obj.addEventListener('touchend',function(event){
            obj.removeEventListener('touchmove');
            obj.removeEventListener('touchend');
        })
    });
}

这里我也设置了2个参数,如果只填一个参数,表示相对父级为window,物体在window内拖动,如果填2个参数,第一个参数为拖拽对象,第二个参数为相对父级,跟pc差不多,有点不同的是,pc鼠标移动和弹起时,我们作用的对象是document,是为什么防止鼠标拖动物体外面所带来的bug,现在是作用于obj对象上,这是为什么呢?

原因是在移动端上,如果有一个拖拽对象相对于window,一个拖拽对象相对于自己的相对父级,现在我们是绑定事件,如果拖动后面这个拖拽对象,因为2个都是执行的,我们把拖拽事件绑定到window,就会一起触发前面的拖拽,如果是绑定在拖拽物体上就可以避免

事件的污染问题,因为都在自身嘛!

我相信实现拖拽的方法不只这个,还有很多的方法可以实现,我也相信我写的这个代码并不是最优的,只能说可以用用,所以,如果哪位大神有更好的实现方法,或者是代码有什么错误的地方,万望指正!不胜感谢!

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/tuodong12812012r.html

网友评论文明上网理性发言 已有0人参与

发表评论: