元素拖拽

最新推荐文章于 2024-06-06 14:48:20 发布

完美主义

最新推荐文章于 2024-06-06 14:48:20 发布

阅读量686

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wmzy1067111110/article/details/44780495

版权

前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

/*
 * 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/