• 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);
        }
    })();
  • 相关阅读:
    ABAP 更改DN外向交货单
    ABAP 参照SO item 创建DN
    ABAP 获取客户供应商的电话,地址,email等相关信息
    ABAP 自定义的ALV导出excel按钮,导出ALV内表中其中某几列的数据
    ABAP 后台JOB布置例子
    ABAP 选择屏幕字段动态隐藏和显示
    ABAP 选择屏幕上的导入模板下载按钮
    ABAP 选择屏幕文件导入时,单元格超50字符怎么处理
    ABAP 选择屏幕字段动态隐藏和显示
    人脸检测数据集
  • 原文地址:https://www.cnblogs.com/top5/p/2575648.html
Copyright © 2020-2023  润新知