zoukankan      html  css  js  c++  java
  • JavaScript: 让拖动支持iphone/ipad触摸

    var getDragClass=(function(){
    var SupportsTouches = ("createTouch" in document),//判断是否支持触摸
        StartEvent = SupportsTouches ? "touchstart" : "mousedown",//支持触摸式使用相应的事件替代
        MoveEvent = SupportsTouches ? "touchmove" : "mousemove",
        EndEvent = SupportsTouches ? "touchend" : "mouseup",
        $=function(id){
            return document.getElementById(id);
        },
        preventDefault=function(ev){
            if(ev)ev.preventDefault();
            else window.event.returnValue = false;
        },
        getMousePoint=function(ev){
            var x = y = 0,
                doc = document.documentElement,
                body = document.body;
                if(!ev) ev=window.event;
                if (window.pageYoffset) {
                    x = window.pageXOffset;
                    y = window.pageYOffset;
                }else{
                    x = (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
                    y = (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
                }
                if(SupportsTouches){
                    var evt = ev.touches.item(0);//仅支持单点触摸,第一个触摸点
                    x=evt.pageX;
                    y=evt.pageY;
                }else{
                    x += ev.clientX;
                    y += ev.clientY;
                }
                return {'x' : x, 'y' : y};
        };
        function _drag(opt){
            this.el=typeof opt.el=='string'?$(opt.el):opt.el;//被拖动节点
            this.onstart=opt.start || new Function();//
            this.onmove=opt.move || new Function();
            this.onend=opt.end || new Function();
            this.action=false;
            this.init();
        }
        _drag.prototype={
            init:function(){
                this.el.style.position='relative';
                this.el['on'+StartEvent]=this.bind(function(e){//绑定节点的 [鼠标按下/触摸开始] 事件
                    preventDefault(e);
                    if(this.action)return false;
                    else this.action=true;
                    this.startPoint=getMousePoint(e);
                    this.onstart();
                    document['on'+MoveEvent]=this.bind(function(e){
                        preventDefault(e);//取消文档的默认行为[鼠标移动、触摸移动]
                        this.nowPoint=getMousePoint(e);
                        this.el.style.left=this.nowPoint.x-this.startPoint.x+'px';
                        this.el.style.top=this.nowPoint.y-this.startPoint.y+'px';
                        this.onmove();
                    },this);
                    document['on'+EndEvent]=document['ontouchcancel']=this.bind(function(){
                        document['on'+EndEvent]=document['ontouchcancel']=document['on'+MoveEvent]=null;
                        this.action=false;
                        this.onend();
                    },this);
                },this);
            },
            bind:function(fn,obj){
                return function(){
                    fn.apply(obj,arguments);
                }
            }
        }
        return function(opt){
            return new _drag(opt);
        }
    })();
  • 相关阅读:
    页面进度条插件pace.js
    cropper.js头像剪裁
    数组每一项与之前项累加
    css实现波浪纹,水波纹动画
    在echart的map上把symbol替换成gif通过convertToPixel坐标转换成px定位到页面,没有做echart的缩放情况下
    vue折叠面板的收缩动画效果,实现点击按钮展开和收起,并有个高度过渡的动画效果
    vue项目中应用自定义的字体
    vue中监听滚动条事件,通过事件控制其他div滚动,固定表头和列
    好久没写博客了
    在nuxt中使用富文本编辑器quill
  • 原文地址:https://www.cnblogs.com/top5/p/2575648.html
Copyright © 2011-2022 走看看