JavaScript: 让拖动支持iphone/ipad触摸

JavaScript: 让拖动支持iphone/ipad触摸  

2011-08-30 15:40:14|  分类： IT技术 |字号 订阅

 

发表于 周六, 6:40 下午

 作者: QiQiBoY 分类: JavaScript 
一 般的通过mousedown、mousemove、mouseup等打造的拖动，仅仅在普通的键盘+鼠标的电脑设备上可以工作。而到了ios设备上 （iphone itouch ipad），则不能工作了。最近因为做个东西，需要支持ios设备，所以只好看了下webkit浏览器的触摸事件。
其实也很简单，对应mousedown、mousemove、mouseup的触摸事件分别是touchstart、touchmove、touchend。为了写个demo，花了不少的时间，所以为了节省时间，我文章里就不多说了，仅贴一下相关代码。



DEMO可以在此查看。
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);
    }
})();

其实就是很简单的了，需要注意跌其实就是获取鼠标坐(getMousePoint)标的那里了，touches.item(0)表示第一个生效触摸点。
DEMO可以在此查看。（触摸效果请使用ios相关设备）
也可以查看http://www.qiqiboy.com/demo/2008/09/layout-test.html 的那个评分拖动长条。