jQuery与vue分别实现超级简单的绿色拖动验证码功能

#drag{ 
    position: relative;
    background-color: #e8e8e8;
    width: 300px;
    height: 34px;
    line-height:
    text-align: center;
}
#drag .handler{
    position: absolute;
    top: 0px;
    left: 40px; 32px;
    border: 1px solid #ccc;
    cursor: move;
}
.handler_bg{
    background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
}
.handler_ok_bg{}
#drag .drag_bg{ #7ac23c; 0px;
}
#drag .drag_text{
    -moz-user-select: none;
    -webkit-user-select:
    user-select:
    -o-user-select:none;
    -ms-user-select:none; 
}

<center style="margin-top: 100px">
        div id="drag"></div>
</center>

 $('#drag').drag();

(function($){
    $.fn.drag = (options){
        var x,drag = this,isMove = false,defaults = {
        };
        var options = $.extend(defaults,options);
        //添加背景，文字，滑块
        var html = '<div class="drag_bg"></div>'+
                    '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
                    '<div class="handler handler_bg"></div>';
        this.append(html);
        
        var handler = drag.find('.handler');
        var drag_bg = drag.find('.drag_bg'var text = drag.find('.drag_text'var maxWidth = drag.width() - handler.width();  能滑动的最大间距
        
        鼠标按下时候的x轴的位置
        handler.mousedown((e){
            isMove = true;
            x = e.pageX - parseInt(handler.css('left'),10);
        });
        
        鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
        $(document).mousemove((e){
            var _x = e.pageX - x;
            if(isMove){
                if(_x > 0 && _x <= maxWidth){
                    handler.css({'left': _x});
                    drag_bg.css({'width': _x});
                }else if(_x > maxWidth){  鼠标指针移动距离达到最大时清空事件
                    dragOk();
                }
            }
        }).mouseup(false;
            if(_x < maxWidth){ 鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
                handler.css({'left': 0});
                drag_bg.css({'width': 0});
            }
        });
        
        清空事件
         dragOk(){
            handler.removeClass('handler_bg').addClass('handler_ok_bg');
            text.text('验证通过');
            drag.css({'color': '#fff'});
            handler.unbind('mousedown');
            $(document).unbind('mousemove');
            $(document).unbind('mouseup');
        }
    };
})(jQuery);

template>
    class="drag_bg weui-btn_primary" :style="{width:curW+'px'}"="drag_text" onselectstart="return false;" unselectable="on":class="[isDragOk ? 'whitecolor':'']">{{text}}="handler"="{left:curW+'px'}" :class="[isDragOk ? 'handler_ok_bg':'handler_bg']">

<style scoped>
#drag { 100%; 36px;
#drag .drag_bg {0;
}
#drag .drag_text { none;
}
.drag_text.whitecolor{
    color:#fff;
}
#drag .handler {
.handler_bg {#fff url("data:image/png;}
.handler_ok_bg {}
</style>

<script>
export default{
    name:'slider',props:{
        
    },data(){
        return{
            curW:0是否在运动
            isDragOk:是否拖动成功
            maxWidth:0,1)">拖动的最大宽度
            element:{},text:'拖动滑块验证'0
            }
        }
    },created(){
        
    },mounted () {
        var self = this.element = document.querySelector('.handler'.getMaxWidth();
        window.addEventListener('resize',1)">(){self.getMaxWidth()});
        window.addEventListener('orientationchange',1)">(){self.getMaxWidth()});
        
        
          this.element.addEventListener('touchstart',self.touchstartFun,1)">);
        document.querySelector('body').addEventListener('touchmove',self.touchmoveFun,1)">);
        document.querySelector('body').addEventListener('touchend',self.touchendFun,1)">);
        
        this.element.addEventListener('mousedown',1)">);
        document.querySelector('body').addEventListener('mousemove',1)">);
        document.querySelector('body').addEventListener('mouseup',1)">);
        
        ( drawAnimate() {
            if( self.curW <= self.maxWidth){
                window.requestAnimFrame(drawAnimate,1000/60);
                self.curW = self.currentPos.x;
            }else{
                self.curW = self.currentPos.x = self.maxWidth;
            }
        })();
    },watch:{
        
    },methods:{
        touchstartFun(e){
            if(.isDragOk){
                  e.preventDefault();
                  ;
              }
            this.isMove = this.curW = this.currentPos.x = .getCurrentPosition(e).x;
        },touchmoveFun(e){
            this.isMove && this.curW > 0 && this.curW < .maxWidth){
                .getCurrentPosition(e).x;
            }
            this.curW >= .maxWidth;
                this.isDragOk = ;
                this.text = "验证通过";
            }
        },touchendFun(e){
            this.currentPos.x = 0var xPos,yPos,rect;
            rect = document.getElementById('drag').getBoundingClientRect();
            event = event.originalEvent;
            判断是touch，还是鼠标事件
            if (event.type.indexOf('touch') !== -1) {
                xPos = event.touches[0].clientX - rect.left;
                yPos = event.touches[0].clientY - rect.top;
            }
            
            鼠标事件
             {
                xPos = event.clientX - rect.left;
                yPos = event.clientY - rect.top;
            }
             {
                x: xPos,y: yPos
            }
        },getMaxWidth(){
            this.maxWidth = document.querySelector("#drag").clientWidth - document.querySelector(".handler").scrollWidth;
        }
    }
}
</script>

slider>