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.οnend=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);
    }
})();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值