元素拖拽

/* * touchScroll   * param:el,evt * evt:{start:function(){},move:function(){},end:function(){}}*/(function(window,document,undefined){    var hasTouch = 'ontouchstart' in window,        hasPointer= navigator.msPointerEnabled,        winW = document.body.clientWidth,        winH = document.body.clientHeight;            function Translate(el,evt){         this.content = typeof el == 'string' ? document.getElementById(el) : el;        this.wrapper = document.getElementById('previewContent');        this.point={x:0,y:0,endX:0,endY:0}        this.result = {x:0,y:0}        this.evt = evt;        this.initEvents();        var _this=this;        this.content.onload = function(){            _this.imgHeight=this.height;        }        this.previewContentHeight = parseInt($('#previewContent').css('height'));        this.bordersWidth=parseInt($('#border').css('height'));    }    Translate.prototype = {        initEvents: function (remove) {            var eventType = remove ? this.removeEvent : this.addEvent;            eventType(window, 'orientationchange', this);            eventType(window, 'resize', this);                        /*PC*/            eventType(this.wrapper, 'mousedown', this);            eventType(window, 'mousemove', this);            eventType(window, 'mousecancel', this);            eventType(window, 'mouseup', this);            /*windows phone*/            if ( hasPointer ) {                eventType(this.wrapper, 'MSPointerDown', this);                eventType(window, 'MSPointerMove', this);                eventType(window, 'MSPointerCancel', this);                eventType(window, 'MSPointerUp', this);            }            /*IOS android*/            if ( hasTouch ) {                eventType(this.wrapper, 'touchstart', this);                eventType(window, 'touchmove', this);                eventType(window, 'touchcancel', this);                eventType(window, 'touchend', this);            }            eventType(this.wrapper, 'transitionend', this);            eventType(this.wrapper, 'webkitTransitionEnd', this);            eventType(this.wrapper, 'oTransitionEnd', this);            eventType(this.wrapper, 'MSTransitionEnd', this);                    },        start:function(e){            var touches = e.touches ? e.touches[0] : e;            this.point.y  = touches.pageY;            this.enabled=true;//是否可以移动            //console.log(0,this.point);            e.stopPropagation();            if(typeof this.evt.start == 'function') this.evt.start(this);        },        move:function(e){            e.preventDefault();            e.stopPropagation();            if(!this.enabled) return false;            var touches = e.touches ? e.touches[0] : e,                diffY = parseInt(touches.pageY - this.point.y);            this.point.endY = this.result.y+diffY;            this.point.endY = this.result.y+diffY;            //console.log(this.point.endY,this.result.y,diffY)            /*if(this.point.endY>=0 || (this.imgHeight+this.point.endY)<this.previewContentHeight){                //this.point.endY =0;                return;            }*/            if(this.point.endY>=0){                this.point.endY =0;                return;            }            if((this.imgHeight+this.point.endY)<this.previewContentHeight){             this.point.endY=this.previewContentHeight-this.imgHeight;            }            this.moveXY(this.point);            if(typeof this.evt.move == 'function') this.evt.move(this);        },        end:function(e){                this.enabled = true;            this.result.y = this.point.endY;                        if(typeof this.evt.end == 'function') this.evt.end(this);        },        transitionEnd:function(){            //CSS动画结束时操作        },        moveXY:function(point){            //this.content.style.left = point.endX+'px';            //if(this.imgHeight-Math.abs(point.endY)<this.previewContentHeight)             this.content.style.top = point.endY+'px';        },        handleEvent: function (e) {            switch ( e.type ) {                case 'touchstart':                case 'MSPointerDown':                case 'mousedown':                    this.start(e);                    break;                case 'touchmove':                case 'MSPointerMove':                case 'mousemove':                    this.move(e);                    break;                case 'touchend':                case 'MSPointerUp':                case 'mouseup':                case 'touchcancel':                case 'MSPointerCancel':                case 'mousecancel':                    this.end(e);                    break;                case 'transitionend':                case 'webkitTransitionEnd':                case 'oTransitionEnd':                case 'MSTransitionEnd':                    this.transitionEnd(e);                    break;                case 'DOMMouseScroll':                case 'mousewheel':                    //this._wheel(e);                    break;                case 'keydown':                    //this._key(e);                    break;            }        },        destroy: function () {            this._initEvents(true);        },        addEvent:function (el, type, fn, capture) {            el.addEventListener(type, fn, !!capture);        },        removeEvent:function (el, type, fn, capture) {            el.removeEventListener(type, fn, !!capture);        }    }    window.Translate = Translate;})(window,document);

滑动，兼容了pc wp，但是主要更适用于Android IOS。

对象的初始化

new Translate('element',{        start:function(){        },        end:function(scroll){                    }     });

文件上传

 var fileElem = document.getElementById('file');          fileElem.onchange = function startRead() {            // obtain input element through DOM           var file = fileElem.files[0];          if(file){            console.log(file);            getAsText(file);          }        }        function getAsText(readFile) {                          var reader = new FileReader();                    // Read file into memory as UTF-16                reader.readAsText(readFile, "UTF-16");                    // Handle progress, success, and errors          reader.onprogress = updateProgress;          reader.onload = loaded;          reader.onerror = errorHandler;        }        function updateProgress(evt) {          if (evt.lengthComputable) {            // evt.loaded and evt.total are ProgressEvent properties            var loaded = (evt.loaded / evt.total);            if (loaded < 1) {              // Increase the prog bar length              // style.width = (loaded * 200) + "px";            }          }        }        function loaded(evt) {            // Obtain the read file data              var fileString = evt.target.result;          console.log(fileString);          // Handle UTF-16 file dump          if(utils.regexp.isChinese(fileString)) {            //Chinese Characters + Name validation          }          else {            // run other charset test          }          // xhr.send(fileString)             }        function errorHandler(evt) {          if(evt.target.error.name == "NotReadableError") {            // The file could not be read          }        }

参考链接 http://www.w3.org/TR/FileAPI/