diff --git a/public/react/src/common/components/DragValidator.js b/public/react/src/common/components/DragValidator.js
index 7d707def0..69e91f604 100644
--- a/public/react/src/common/components/DragValidator.js
+++ b/public/react/src/common/components/DragValidator.js
@@ -1,114 +1,115 @@
-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);
-}
-
-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()
- }
- });
- // }else{
- // $("#reg-drag").empty();
- // }
- }
- empty() {
- $("#reg-drag").empty();
- }
- render() {
- const height = this.props.height || 45;
- const className = this.props.className
- const successGreenColor = this.props.successGreenColor || '#29bd8b'
- // newMain clearfix
- return (
-
-
-
-
- );
- }
-}
-
+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);
+}
+
+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()
+ }
+ });
+ // }else{
+ // $("#reg-drag").empty();
+ // }
+ }
+ empty() {
+ $("#reg-drag").empty();
+ }
+ render() {
+ const height = this.props.height || 45;
+ const className = this.props.className
+ const successGreenColor = this.props.successGreenColor || '#29bd8b'
+ // newMain clearfix
+ return (
+
+
+
+
+ );
+ }
+}
+
export default ( DragValidator );
\ No newline at end of file
diff --git a/public/react/src/common/components/DragValidatortwo.js b/public/react/src/common/components/DragValidatortwo.js
deleted file mode 100644
index 2b789063e..000000000
--- a/public/react/src/common/components/DragValidatortwo.js
+++ /dev/null
@@ -1,114 +0,0 @@
-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);
-}
-
-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()
- }
- });
- // }else{
- // $("#reg-drag").empty();
- // }
- }
- empty() {
- $("#reg-drag").empty();
- }
- render() {
- const height = this.props.height || 45;
- const className = this.props.className
- const successGreenColor = this.props.successGreenColor || '#29bd8b'
- // newMain clearfix
- return (
-
-
-
-
- );
- }
-}
-
-export default ( DragValidator );
\ No newline at end of file
diff --git a/public/react/src/modules/user/CheckInputysl.js b/public/react/src/modules/user/CheckInputysl.js
new file mode 100644
index 000000000..a057f12d4
--- /dev/null
+++ b/public/react/src/modules/user/CheckInputysl.js
@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import "./secureCode.css";
+
+/**
+ * An TextInput with Icon and check
+ * 带图标检查的输入框
+ */
+class CheckInputysl extends Component {
+ constructor(){
+ super();
+ this.state = {
+ isMove:false,
+ start:0,
+ moveLength:0,
+ clear:false,
+ move:0,
+ width:0
+ };
+ this.onMouseUp = this.onMouseUp.bind(this);
+ this.onMouseDown = this.onMouseDown.bind(this);
+ this.onMouseMove = this.onMouseMove.bind(this);
+ }
+ componentDidMount() {
+ let dragHandler = document.getElementById("dragHandler");
+ dragHandler.addEventListener("mousedown", this.onMouseDown);
+ }
+ onMouseDown(e){
+ console.log("28");
+ document.addEventListener("mousemove", this.onMouseMove);
+ document.addEventListener("mouseup", this.onMouseUp);
+ let event=e||window.event;
+ this.setState({
+ isMove:true,
+ start:event.pageX
+ });
+ }
+ onMouseUp(e){
+ console.log("38");
+ let event=e||window.event;
+ this.setState({
+ isMove:false,
+ });
+ let drag = window.getComputedStyle(this.verifyDOM);
+ let handler = window.getComputedStyle(this.handlerDOM);
+ let moveLength = event.clientX-this.verifyDOM.offsetLeft - Number.parseInt(handler.width) / 2;
+ // console.log(drag.width);
+ let maxWidth = Number.parseInt(drag.width) - Number.parseInt(handler.width);
+ console.log("moveLength="+moveLength);
+ console.log("maxWidth="+maxWidth);
+ if(moveLength <= maxWidth){ //鼠标松开时,如果没有达到最大距离位置,滑块就返回初始位置
+ this.setState({
+ move:0,
+ width:0
+ });
+ document.removeEventListener("mousemove", this.onMouseMove);
+ document.removeEventListener("mouseup", this.onMouseUp);
+ }
+ if(this.props.onDrag){
+ this.props.onDrag(this.state.clear);
+ }
+ }
+ onMouseMove(e){
+ console.log("63");
+ let event=e||window.event;
+ let drag = window.getComputedStyle(this.verifyDOM);
+ let handler = window.getComputedStyle(this.handlerDOM);
+ let moveLength = event.clientX-this.verifyDOM.offsetLeft - Number.parseInt(handler.width) / 2;
+ let maxWidth = Number.parseInt(drag.width) - Number.parseInt(handler.width);
+ if(this.state.isMove){
+ if(moveLength<0){
+ moveLength=0
+ }else if(moveLength >= maxWidth){
+ moveLength=maxWidth;
+ this.removeMouseMove();
+ }
+ this.setState({
+ move:moveLength,
+ width:moveLength
+ });
+ }
+ }
+ //清空事件
+ removeMouseMove(){
+ this.setState({
+ clear:true
+ });
+ let dragHandler = document.getElementById("dragHandler");
+ dragHandler.removeEventListener("mousedown", this.onMouseDown);
+ document.removeEventListener("mousemove", this.onMouseMove);
+ document.removeEventListener("mouseup", this.onMouseUp);
+ this.props.dragOkCallback();
+ }
+ render(){
+ return (
+ {this.verifyDOM = dom}} style={{"color":this.state.clear ? "#fff" : "#252535"}}>
+
{this.bgDOM = dom}} style={{"width":this.state.width}}>
+
{this.state.clear ? "验证通过" : "拖动滑块验证"}
+
{this.handlerDOM = dom}}>
+
+ );
+ }
+}
+
+export default ( CheckInputysl );
\ No newline at end of file
diff --git a/public/react/src/modules/user/FindPasswordComponent.js b/public/react/src/modules/user/FindPasswordComponent.js
index 22fcd97de..0c3678776 100644
--- a/public/react/src/modules/user/FindPasswordComponent.js
+++ b/public/react/src/modules/user/FindPasswordComponent.js
@@ -2,11 +2,11 @@ import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
-import {getImageUrl, DragValidator} from 'educoder';
-
+import {getImageUrl} from 'educoder';
+import CheckInputysl1 from './CheckInputysl';
+import CheckInputysl2 from './CheckInputysl';
import {Tabs, Input, Checkbox, Button, notification} from 'antd';
-import DragValidatortwo from '../../../src/common/components/DragValidatortwo'
import ReadPassword from './ReadPassword';
@@ -643,24 +643,20 @@ class LoginRegisterComponent extends Component {
{
Whethertoverify===false&&pciphone===true?
- this.dragOkCallback()}
- className="ysllw100"
- >
+
+
:
""
}
{
Whethertoverify===true&&pciphone===true?
- this.dragOkCallback()}
- className="ysllw100"
- >
+
+
:
""
}
diff --git a/public/react/src/modules/user/LoginRegisterComponent.js b/public/react/src/modules/user/LoginRegisterComponent.js
index dcbaf4730..f6c32909d 100644
--- a/public/react/src/modules/user/LoginRegisterComponent.js
+++ b/public/react/src/modules/user/LoginRegisterComponent.js
@@ -2,12 +2,13 @@ import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
-import {getImageUrl, DragValidator,broadcastChannelPostMessage} from 'educoder';
+import {getImageUrl,broadcastChannelPostMessage} from 'educoder';
import {Tabs, Input, Checkbox, Button, notification,Menu} from 'antd';
import passopen from '../../../src/images/login/passopen.png';
import passoff from '../../../src/images/login/passoff.png';
import axios from 'axios';
-import DragValidatortwo from '../../../src/common/components/DragValidatortwo'
+import CheckInputysl1 from './CheckInputysl';
+import CheckInputysl2 from './CheckInputysl';
import './common.css'
import './commontwo.css'
const { TabPane } = Tabs;
@@ -402,7 +403,7 @@ class LoginRegisterComponent extends Component {
type: 1,
}
}).then((result) => {
- debugger
+
//验证有问题{"status":1,"message":"success"}
// console.log(result);
// this.setState({dragOk: true})
@@ -941,27 +942,24 @@ class LoginRegisterComponent extends Component {
}
{
Whethertoverify===false&&pciphone===true?
-
+
+
:
""
}
{
Whethertoverify===true&&pciphone===true?
-
+
+
:
""
}
+
{
pciphone===true?
diff --git a/public/react/src/modules/user/secureCode.css b/public/react/src/modules/user/secureCode.css
new file mode 100644
index 000000000..e7f171711
--- /dev/null
+++ b/public/react/src/modules/user/secureCode.css
@@ -0,0 +1,42 @@
+#drag{
+ position: relative;
+ background-color: #e8e8e8;
+ min-width: 300px;
+ height: 38px;
+ line-height: 38px;
+ text-align: center;
+}
+#drag .handler{
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 40px;
+ height: 38px;
+ 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{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}
+
+#drag .drag_bg{
+ background-color: #7ac23c;
+ height: 38px;
+ width: 0px;
+}
+#drag .drag_text{
+ position: absolute;
+ top: 0px;
+ font-size: 14px;
+ width: 100%;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ color: #fff;
+ user-select: none;
+ -o-user-select:none;
+ -ms-user-select:none;
+}
+
+/* }*/
+/*//.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{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}*/