From ebacd520ebe3a484c9761b6ef1873931680c55db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E6=A0=91=E6=98=8E?= <775174143@qq.com>
Date: Sat, 31 Aug 2019 16:37:44 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/common/components/DragValidator.js | 149 +++++++++---------
public/react/src/common/educoder.js | 2 +-
2 files changed, 76 insertions(+), 75 deletions(-)
diff --git a/public/react/src/common/components/DragValidator.js b/public/react/src/common/components/DragValidator.js
index 69e91f604..33daa5cac 100644
--- a/public/react/src/common/components/DragValidator.js
+++ b/public/react/src/common/components/DragValidator.js
@@ -2,89 +2,90 @@ import React, { Component } from 'react';
const $ = window.jQuery
const jQuery = $;
-if (!$.drag) {
- (function($){
- $.fn.dragValidator = function(options){
- var x, drag = this, isMove = false, defaults = {
- };
- var options = $.extend(defaults, options);
- //添加背景，文字，滑块
- var html = ''+
- '拖动滑块验证
'+
- '';
- this.append(html);
-
- var handler = drag.find('.handler');
- var drag_bg = drag.find('.drag_bg');
- var text = drag.find('.drag_text');
- var maxWidth = text.width() - handler.width(); //能滑动的最大间距
- //鼠标按下时候的x轴的位置
- handler.mousedown(function(e){
- isMove = true;
- x = e.pageX - parseInt(handler.css('left'), 10);
- });
-
- //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
- $(document).mousemove(function(e){
- var _x = e.pageX - x;
- var handler_offset = handler.offset();
- var lastX = e.clientX -x;
- lastX = Math.max(0,Math.min(maxWidth,lastX));
- if(isMove){
- if(_x > 0 && _x <= maxWidth){
- handler.css({'left': lastX});
- drag_bg.css({'width': lastX});
- }
- else if(lastX > maxWidth - 5 && lastX < maxWidth + 5 ){ //鼠标指针移动距离达到最大时清空事件
- dragOk();
-
- }
- }
- });
- handler.mouseup(function(e){
- isMove = false;
- var _x = e.pageX - x;
- if(text.text() != '验证通过' && _x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
- handler.animate({'left': 0});
- drag_bg.animate({'width': 0});
- }
- });
-
- //清空事件
- function dragOk(){
- options.dragOkCallback && options.dragOkCallback()
- var kuaiwidth=drag.width() - handler.width() - 2;
- handler.removeClass('handler_bg').addClass('handler_ok_bg');
- handler.css({'left':kuaiwidth+'px'})
- text.css({'width':kuaiwidth+'px'});
- text.text('验证通过');
- drag.css({'color': '#fff'});
- drag_bg.css({'width':kuaiwidth+'px'})
- handler.unbind('mousedown');
- $(document).unbind('mousemove');
- $(document).unbind('mouseup');
- $("#user_verification_notice").html("");
- $('#user_verification_notice').parent().hide();
- }
- };
- })(jQuery);
-}
+// if () {
+// !$.drag
+ // (function($){
+ // $.fn.dragValidator = function(options){
+ // var x, drag = this, isMove = false, defaults = {
+ // };
+ // var options = $.extend(defaults, options);
+ // //添加背景，文字，滑块
+ // var html = ''+
+ // '拖动滑块验证
'+
+ // '';
+ // this.append(html);
+ //
+ // var handler = drag.find('.handler');
+ // var drag_bg = drag.find('.drag_bg');
+ // var text = drag.find('.drag_text');
+ // var maxWidth = text.width() - handler.width(); //能滑动的最大间距
+ // //鼠标按下时候的x轴的位置
+ // handler.mousedown(function(e){
+ // isMove = true;
+ // x = e.pageX - parseInt(handler.css('left'), 10);
+ // });
+ //
+ // //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
+ // $(document).mousemove(function(e){
+ // var _x = e.pageX - x;
+ // var handler_offset = handler.offset();
+ // var lastX = e.clientX -x;
+ // lastX = Math.max(0,Math.min(maxWidth,lastX));
+ // if(isMove){
+ // if(_x > 0 && _x <= maxWidth){
+ // handler.css({'left': lastX});
+ // drag_bg.css({'width': lastX});
+ // }
+ // else if(lastX > maxWidth - 5 && lastX < maxWidth + 5 ){ //鼠标指针移动距离达到最大时清空事件
+ // dragOk();
+ //
+ // }
+ // }
+ // });
+ // handler.mouseup(function(e){
+ // isMove = false;
+ // var _x = e.pageX - x;
+ // if(text.text() != '验证通过' && _x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
+ // handler.animate({'left': 0});
+ // drag_bg.animate({'width': 0});
+ // }
+ // });
+ //
+ // //清空事件
+ // function dragOk(){
+ // options.dragOkCallback && options.dragOkCallback()
+ // var kuaiwidth=drag.width() - handler.width() - 2;
+ // handler.removeClass('handler_bg').addClass('handler_ok_bg');
+ // handler.css({'left':kuaiwidth+'px'})
+ // text.css({'width':kuaiwidth+'px'});
+ // text.text('验证通过');
+ // drag.css({'color': '#fff'});
+ // drag_bg.css({'width':kuaiwidth+'px'})
+ // handler.unbind('mousedown');
+ // $(document).unbind('mousemove');
+ // $(document).unbind('mouseup');
+ // $("#user_verification_notice").html("");
+ // $('#user_verification_notice').parent().hide();
+ // }
+ // };
+ // })(jQuery);
+// }
class DragValidator extends Component {
componentDidMount () {
// if($("#reg-drag").length>0 && IsPC()){
- $("#reg-drag").dragValidator({
- height: this.props.height,
- dragOkCallback: () => {
- this.props.dragOkCallback && this.props.dragOkCallback()
- }
- });
+ // $("#reg-drag").dragValidator({
+ // height: this.props.height,
+ // dragOkCallback: () => {
+ // this.props.dragOkCallback && this.props.dragOkCallback()
+ // }
+ // });
// }else{
// $("#reg-drag").empty();
// }
}
empty() {
- $("#reg-drag").empty();
+ // $("#reg-drag").empty();
}
render() {
const height = this.props.height || 45;
diff --git a/public/react/src/common/educoder.js b/public/react/src/common/educoder.js
index 8eb34ef55..1d7c66dbb 100644
--- a/public/react/src/common/educoder.js
+++ b/public/react/src/common/educoder.js
@@ -42,7 +42,7 @@ export { SetAppModel } from './components/SetAppModel'
export { default as LinkAfterLogin } from './components/LinkAfterLogin'
export { default as Cropper } from './components/Cropper'
export { default as ConditionToolTip } from './components/ConditionToolTip'
-export { default as DragValidator } from './components/DragValidator'
+// export { default as DragValidator } from './components/DragValidator'
export { default as PopInstruction } from './components/instruction/PopInstruction'