iphone浏览器拖拽 js 推杆

function slip(){};
slip.prototype={
    parent:0,
    bigRecCanvas:0,
    pushRecCanvas:0,
    initParent:function(parents){
        this.parent = $("#"+parents)[0];
    },
    initObj:function(){
       
         this.bigRecCanvas = document.createElement("CANVAS");
         $(this.bigRecCanvas).attr("style","position:absolute;");
         $(this.bigRecCanvas).attr("height","110");
         $(this.bigRecCanvas).attr("width","20");
         this.pushRecCanvas =$(this.bigRecCanvas).clone()[0];
         
         $(this.pushRecCanvas).attr("height","40");
         $(this.pushRecCanvas).attr("width","20");

         $(this.parent).append(this.bigRecCanvas);
         $(this.parent).append(this.pushRecCanvas);
    },
    draw:function(){
             var bigRecCtx = this.bigRecCanvas.getContext('2d');
             
             var pushRecCtx = this.pushRecCanvas.getContext('2d');
             bigRecCtx.fillStyle="#900"
             bigRecCtx.fillRect(0,0,20,110);
             
             bigRecCtx.fillStyle="#990"
             pushRecCtx.fillRect(0,0,20,40);
             var obj = this.pushRecCanvas;
             this.pushRecCanvas.ontouchmove=function(e){
                var nowY =  e.touches[0].pageY;
                if(nowY>obj.parentNode.offsetTop&&nowY<obj.parentNode.offsetTop+$(obj).prevAll().first().attr("height")-$(obj).attr("height")){
                     nowY = nowY-obj.parentNode.offsetTop ;
                     obj.style.top  = nowY + "px";
                }
                else{
                    if(nowY<obj.parentNode.offsetTop)
                         nowY = 0;
                     else if(nowY>obj.parentNode.offsetTop+$(obj).prevAll().first().attr("height")-$(obj).attr("height"))
                         nowY = $(obj).prevAll().first().attr("height")-$(obj).attr("height");
                     obj.style.top  = nowY + "px";
                }
               
                e.preventDefault();
             };
    }
};