|
|
|
@ -2,89 +2,90 @@ import React, { Component } from 'react';
|
|
|
|
|
|
|
|
|
|
|
|
const $ = window.jQuery
|
|
|
|
const $ = window.jQuery
|
|
|
|
const jQuery = $;
|
|
|
|
const jQuery = $;
|
|
|
|
if (!$.drag) {
|
|
|
|
// if () {
|
|
|
|
(function($){
|
|
|
|
// !$.drag
|
|
|
|
$.fn.dragValidator = function(options){
|
|
|
|
// (function($){
|
|
|
|
var x, drag = this, isMove = false, defaults = {
|
|
|
|
// $.fn.dragValidator = function(options){
|
|
|
|
};
|
|
|
|
// var x, drag = this, isMove = false, defaults = {
|
|
|
|
var options = $.extend(defaults, options);
|
|
|
|
// };
|
|
|
|
//添加背景，文字，滑块
|
|
|
|
// var options = $.extend(defaults, options);
|
|
|
|
var html = '<div class="drag_bg"></div>'+
|
|
|
|
// //添加背景，文字，滑块
|
|
|
|
'<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
|
|
|
|
// var html = '<div class="drag_bg"></div>'+
|
|
|
|
'<div class="handler handler_bg"></div>';
|
|
|
|
// '<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>'+
|
|
|
|
this.append(html);
|
|
|
|
// '<div class="handler handler_bg"></div>';
|
|
|
|
|
|
|
|
// this.append(html);
|
|
|
|
var handler = drag.find('.handler');
|
|
|
|
//
|
|
|
|
var drag_bg = drag.find('.drag_bg');
|
|
|
|
// var handler = drag.find('.handler');
|
|
|
|
var text = drag.find('.drag_text');
|
|
|
|
// var drag_bg = drag.find('.drag_bg');
|
|
|
|
var maxWidth = text.width() - handler.width(); //能滑动的最大间距
|
|
|
|
// var text = drag.find('.drag_text');
|
|
|
|
//鼠标按下时候的x轴的位置
|
|
|
|
// var maxWidth = text.width() - handler.width(); //能滑动的最大间距
|
|
|
|
handler.mousedown(function(e){
|
|
|
|
// //鼠标按下时候的x轴的位置
|
|
|
|
isMove = true;
|
|
|
|
// handler.mousedown(function(e){
|
|
|
|
x = e.pageX - parseInt(handler.css('left'), 10);
|
|
|
|
// isMove = true;
|
|
|
|
});
|
|
|
|
// x = e.pageX - parseInt(handler.css('left'), 10);
|
|
|
|
|
|
|
|
// });
|
|
|
|
//鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
|
|
|
|
//
|
|
|
|
$(document).mousemove(function(e){
|
|
|
|
// //鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
|
|
|
|
var _x = e.pageX - x;
|
|
|
|
// $(document).mousemove(function(e){
|
|
|
|
var handler_offset = handler.offset();
|
|
|
|
// var _x = e.pageX - x;
|
|
|
|
var lastX = e.clientX -x;
|
|
|
|
// var handler_offset = handler.offset();
|
|
|
|
lastX = Math.max(0,Math.min(maxWidth,lastX));
|
|
|
|
// var lastX = e.clientX -x;
|
|
|
|
if(isMove){
|
|
|
|
// lastX = Math.max(0,Math.min(maxWidth,lastX));
|
|
|
|
if(_x > 0 && _x <= maxWidth){
|
|
|
|
// if(isMove){
|
|
|
|
handler.css({'left': lastX});
|
|
|
|
// if(_x > 0 && _x <= maxWidth){
|
|
|
|
drag_bg.css({'width': lastX});
|
|
|
|
// handler.css({'left': lastX});
|
|
|
|
}
|
|
|
|
// drag_bg.css({'width': lastX});
|
|
|
|
else if(lastX > maxWidth - 5 && lastX < maxWidth + 5 ){ //鼠标指针移动距离达到最大时清空事件
|
|
|
|
// }
|
|
|
|
dragOk();
|
|
|
|
// else if(lastX > maxWidth - 5 && lastX < maxWidth + 5 ){ //鼠标指针移动距离达到最大时清空事件
|
|
|
|
|
|
|
|
// dragOk();
|
|
|
|
}
|
|
|
|
//
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
});
|
|
|
|
// }
|
|
|
|
handler.mouseup(function(e){
|
|
|
|
// });
|
|
|
|
isMove = false;
|
|
|
|
// handler.mouseup(function(e){
|
|
|
|
var _x = e.pageX - x;
|
|
|
|
// isMove = false;
|
|
|
|
if(text.text() != '验证通过' && _x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
|
|
|
|
// var _x = e.pageX - x;
|
|
|
|
handler.animate({'left': 0});
|
|
|
|
// if(text.text() != '验证通过' && _x < maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
|
|
|
|
drag_bg.animate({'width': 0});
|
|
|
|
// handler.animate({'left': 0});
|
|
|
|
}
|
|
|
|
// drag_bg.animate({'width': 0});
|
|
|
|
});
|
|
|
|
// }
|
|
|
|
|
|
|
|
// });
|
|
|
|
//清空事件
|
|
|
|
//
|
|
|
|
function dragOk(){
|
|
|
|
// //清空事件
|
|
|
|
options.dragOkCallback && options.dragOkCallback()
|
|
|
|
// function dragOk(){
|
|
|
|
var kuaiwidth=drag.width() - handler.width() - 2;
|
|
|
|
// options.dragOkCallback && options.dragOkCallback()
|
|
|
|
handler.removeClass('handler_bg').addClass('handler_ok_bg');
|
|
|
|
// var kuaiwidth=drag.width() - handler.width() - 2;
|
|
|
|
handler.css({'left':kuaiwidth+'px'})
|
|
|
|
// handler.removeClass('handler_bg').addClass('handler_ok_bg');
|
|
|
|
text.css({'width':kuaiwidth+'px'});
|
|
|
|
// handler.css({'left':kuaiwidth+'px'})
|
|
|
|
text.text('验证通过');
|
|
|
|
// text.css({'width':kuaiwidth+'px'});
|
|
|
|
drag.css({'color': '#fff'});
|
|
|
|
// text.text('验证通过');
|
|
|
|
drag_bg.css({'width':kuaiwidth+'px'})
|
|
|
|
// drag.css({'color': '#fff'});
|
|
|
|
handler.unbind('mousedown');
|
|
|
|
// drag_bg.css({'width':kuaiwidth+'px'})
|
|
|
|
$(document).unbind('mousemove');
|
|
|
|
// handler.unbind('mousedown');
|
|
|
|
$(document).unbind('mouseup');
|
|
|
|
// $(document).unbind('mousemove');
|
|
|
|
$("#user_verification_notice").html("");
|
|
|
|
// $(document).unbind('mouseup');
|
|
|
|
$('#user_verification_notice').parent().hide();
|
|
|
|
// $("#user_verification_notice").html("");
|
|
|
|
}
|
|
|
|
// $('#user_verification_notice').parent().hide();
|
|
|
|
};
|
|
|
|
// }
|
|
|
|
})(jQuery);
|
|
|
|
// };
|
|
|
|
}
|
|
|
|
// })(jQuery);
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
class DragValidator extends Component {
|
|
|
|
class DragValidator extends Component {
|
|
|
|
componentDidMount () {
|
|
|
|
componentDidMount () {
|
|
|
|
// if($("#reg-drag").length>0 && IsPC()){
|
|
|
|
// if($("#reg-drag").length>0 && IsPC()){
|
|
|
|
$("#reg-drag").dragValidator({
|
|
|
|
// $("#reg-drag").dragValidator({
|
|
|
|
height: this.props.height,
|
|
|
|
// height: this.props.height,
|
|
|
|
dragOkCallback: () => {
|
|
|
|
// dragOkCallback: () => {
|
|
|
|
this.props.dragOkCallback && this.props.dragOkCallback()
|
|
|
|
// this.props.dragOkCallback && this.props.dragOkCallback()
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
});
|
|
|
|
// });
|
|
|
|
// }else{
|
|
|
|
// }else{
|
|
|
|
// $("#reg-drag").empty();
|
|
|
|
// $("#reg-drag").empty();
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
empty() {
|
|
|
|
empty() {
|
|
|
|
$("#reg-drag").empty();
|
|
|
|
// $("#reg-drag").empty();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
|
|
render() {
|
|
|
|
const height = this.props.height || 45;
|
|
|
|
const height = this.props.height || 45;
|
|
|
|
|
