QapTcha拖动验证码提交表单

<form method="post" action=""> 
        <label>姓名</label> <input type="text" name="username" /> 
        <input type="submit" name="submit" value="提交表单" /> 
</form>

<script type="text/javascript" src="jquery/jquery.js"></script> 
<script type="text/javascript" src="jquery/jquery-ui.js"></script> 
<script type="text/javascript" src="jquery/jquery.ui.touch.js"></script> 
<script type="text/javascript" src="jquery/QapTcha.jquery.js"></script>

$(document).ready(function () {
            $.fn.QapTcha.options = { disabledSubmit: true,autoSubmit:false, autoRevert: true, txtLock: "请拖动滑块至最右侧", txtUnlock: '验证成功', url: '/cdnt/infor/queryAction!getToken.do?r='+ Math.random() };
            $('.QapTcha').QapTcha($.fn.QapTcha.options);
            $.ajax({
               url:'/cdnt/infor/queryAction!getMsg.do?r='+ Math.random(),
               data:"",
               type:'POST',
               success: function(data){
alert(data);
                  if(data.fieldData.result.paramval=="1"){
                      $("#spMsg").html(data.fieldData.result.remark);
                      $("#notice").slideDown(500);
                  }
                  loginid = data.fieldData.result.loginid;
                  $("#lgyz").val(loginid);
            }
            });
        });

QapTcha.jquery.css

.QapTcha {float:left;margin-top:20px;width:252px;}
.QapTcha .clr{clear:both}
.QapTcha .bgSlider {width:252px;height:37px;float:left;border:1px solid #040404;background-color:#101010;}
.QapTcha .Slider {width:52px;height:37px;background:transparent url('../images/bg_draggable_qaptcha.jpg') no-repeat;cursor:e-resize;position:relative;top:0;left:0}
.QapTcha .TxtStatus {width:252px;margin-top:7px;text-align:left;color:#bb2828;font-family:Verdana;font-size:10px;clear:both}
.QapTcha .dropSuccess {color:#4e8b37}
.QapTcha .dropError {color:#bb2828}

QapTcha.jquery.js

/************************************************************************
*************************************************************************
@Name :           QapTcha - jQuery Plugin
@Revison :        4.2
@Date :         06/09/2012  - dd/mm/YYYY
@Author:          ALPIXEL Agency - (www.myjqueryplugins.com - www.alpixel.fr)
@License :         Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php

**************************************************************************
*************************************************************************/
jQuery.QapTcha = {
    build : function(options)
    {
        var defaults = {
            txtLock : '已上锁 :表单不能提交，请拖动上方箭头到最右侧解锁',
            txtUnlock : '已解锁锁 : 表单能提交',
            disabledSubmit : true,
            autoRevert : true,
            PHPfile : 'php/Qaptcha.jquery.php',
            autoSubmit : false
        };

        if(this.length>0)
        return jQuery(this).each(function(i) {
            /** Vars **/
            var
                opts = $.extend(defaults, options),
                $this = $(this),
                form = $('form').has($this),
                Clr = jQuery('<div>',{'class':'clr'}),
                bgSlider = jQuery('<div>',{'class':'bgSlider'}),
                Slider = jQuery('<div>',{'class':'Slider'}),
                TxtStatus = jQuery('<div>',{'class':' TxtStatus dropError',text:opts.txtLock}),
                inputQapTcha = jQuery('<input>',{name:generatePass(32),value:generatePass(7),type:'hidden'});

            /** Disabled submit button **/
            if(opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled','disabled');

            /** Construct DOM **/
            bgSlider.appendTo($this);
            Clr.insertAfter(bgSlider);
            TxtStatus.insertAfter(Clr);
            inputQapTcha.appendTo($this);
            Slider.appendTo(bgSlider);
            $this.show();

            Slider.draggable({
                revert: function(){
                    if(opts.autoRevert)
                    {
                        if(parseInt(Slider.css("left")) > (bgSlider.width()-Slider.width()-10)) return false;
                        else return true;
                    }
                },
                containment: bgSlider,
                axis:'x',
                stop: function(event,ui){
                    if(ui.position.left > (bgSlider.width()-Slider.width()-10))
                    {
                        // set the SESSION iQaptcha in PHP file
                        $.post(opts.PHPfile,{
                            action : 'qaptcha',
                            qaptcha_key : inputQapTcha.attr('name')
                        },
                        function(data) {
                            if(!data.error)
                            {
                                Slider.draggable('disable').css('cursor','default');
                                inputQapTcha.val('');
                                TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
                                form.find('input[type=\'submit\']').removeAttr('disabled');
                                if(opts.autoSubmit) form.find('input[type=\'submit\']').trigger('click');
                            }
                        },'json');
                    }
                }
            });

            function generatePass(nb) {
                var chars = 'azertyupqsdfghjkmwxcvbn23456789AZERTYUPQSDFGHJKMWXCVBN_-#@';
                var pass = '';
                for(i=0;i<nb;i++){
                    var wpos = Math.round(Math.random()*chars.length);
                    pass += chars.substring(wpos,wpos+1);
                }
                return pass;
            }

        });
    }
}; jQuery.fn.QapTcha = jQuery.QapTcha.build;

jquery.ui.touch.js

/**
* jQuery.UI.iPad plugin
* Copyright (c) 2010 Stephen von Takach
* licensed under MIT.
* Date: 27/8/2010
*
* Project Home: 
* http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
*/

$(function() {
    //
    // Extend jQuery feature detection
    //
    $.extend($.support, {
        touch: "ontouchend" in document
    });
    
    //
    // Hook up touch events
    //
    if ($.support.touch) {
        var obj = document.getElementsByClassName('QapTcha');
        for(i=0; i<obj.length;i++){
        obj[i].addEventListener("touchstart", iPadTouchHandler, false);
        obj[i].addEventListener("touchmove", iPadTouchHandler, false);
        obj[i].addEventListener("touchend", iPadTouchHandler, false);
        obj[i].addEventListener("touchcancel", iPadTouchHandler, false);
    }}
});


var lastTap = null;            // Holds last tapped element (so we can compare for double tap)
var tapValid = false;            // Are we still in the .6 second window where a double tap can occur
var tapTimeout = null;            // The timeout reference

function cancelTap() {
    tapValid = false;
}


var rightClickPending = false;    // Is a right click still feasible
var rightClickEvent = null;        // the original event
var holdTimeout = null;            // timeout reference
var cancelMouseUp = false;        // prevents a click from occuring as we want the context menu


function cancelHold() {
    if (rightClickPending) {
        window.clearTimeout(holdTimeout);
        rightClickPending = false;
        rightClickEvent = null;
    }
}

function startHold(event) {
    if (rightClickPending)
        return;

    rightClickPending = true; // We could be performing a right click
    rightClickEvent = (event.changedTouches)[0];
    holdTimeout = window.setTimeout("doRightClick();", 800);
}


function doRightClick() {
    rightClickPending = false;

    //
    // We need to mouse up (as we were down)
    //
    var first = rightClickEvent,
        simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent("mouseup", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
            false, false, false, false, 0, null);
    first.target.dispatchEvent(simulatedEvent);

    //
    // emulate a right click
    //
    simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent("mousedown", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
            false, false, false, false, 2, null);
    first.target.dispatchEvent(simulatedEvent);

    //
    // Show a context menu
    //
    simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent("contextmenu", true, true, window, 1, first.screenX + 50, first.screenY + 5, first.clientX + 50, first.clientY + 5,
                                  false, false, false, false, 2, null);
    first.target.dispatchEvent(simulatedEvent);


    //
    // Note:: I don't mouse up the right click here however feel free to add if required
    //


    cancelMouseUp = true;
    rightClickEvent = null; // Release memory
}


//
// mouse over event then mouse down
//
function iPadTouchStart(event) {
    var touches = event.changedTouches,
        first = touches[0],
        type = "mouseover",
        simulatedEvent = document.createEvent("MouseEvent");
    //
    // Mouse over first - I have live events attached on mouse over
    //
    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, 0, null);
    first.target.dispatchEvent(simulatedEvent);

    type = "mousedown";
    simulatedEvent = document.createEvent("MouseEvent");

    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, 0, null);
    first.target.dispatchEvent(simulatedEvent);


    if (!tapValid) {
        lastTap = first.target;
        tapValid = true;
        tapTimeout = window.setTimeout("cancelTap();", 600);
        startHold(event);
    }
    else {
        window.clearTimeout(tapTimeout);

        //
        // If a double tap is still a possibility and the elements are the same
        //    Then perform a double click
        //
        if (first.target == lastTap) {
            lastTap = null;
            tapValid = false;

            type = "click";
            simulatedEvent = document.createEvent("MouseEvent");

            simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                             false, false, false, false, 0/*left*/, null);
            first.target.dispatchEvent(simulatedEvent);

            type = "dblclick";
            simulatedEvent = document.createEvent("MouseEvent");

            simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                             false, false, false, false, 0/*left*/, null);
            first.target.dispatchEvent(simulatedEvent);
        }
        else {
            lastTap = first.target;
            tapValid = true;
            tapTimeout = window.setTimeout("cancelTap();", 600);
            startHold(event);
        }
    }
}

function iPadTouchHandler(event) {
    var type = "",
        button = 0; /*left*/

    if (event.touches.length > 1)
        return;

    switch (event.type) {
        case "touchstart":
            if ($(event.changedTouches[0].target).is("select")) {
                return;
            }
            iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
            event.preventDefault();
            return false;
            break;

        case "touchmove":
            cancelHold();
            type = "mousemove";
            event.preventDefault();
            break;

        case "touchend":
            if (cancelMouseUp) {
                cancelMouseUp = false;
                event.preventDefault();
                return false;
            }
            cancelHold();
            type = "mouseup";
            break;

        default:
            return;
    }

    var touches = event.changedTouches,
        first = touches[0],
        simulatedEvent = document.createEvent("MouseEvent");

    simulatedEvent.initMouseEvent(type, true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, button, null);

    first.target.dispatchEvent(simulatedEvent);

    if (type == "mouseup" && tapValid && first.target == lastTap) {    // This actually emulates the ipads default behaviour (which we prevented)
        simulatedEvent = document.createEvent("MouseEvent");        // This check avoids click being emulated on a double tap

        simulatedEvent.initMouseEvent("click", true, true, window, 1, first.screenX, first.screenY, first.clientX, first.clientY,
                            false, false, false, false, button, null);

        first.target.dispatchEvent(simulatedEvent);
    }
}