拖动排序验证码

最新推荐文章于 2022-05-09 18:21:40 发布

iteye_19312

最新推荐文章于 2022-05-09 18:21:40 发布

阅读量196

点赞数

文章标签： javascript ViewUI

拖动排序验证码

演示

 
   XML/HTML Code 
  
 
   <form class="registration">  
  
            <fieldset>  
                <legend>拖动排序</legend>  
                <div class="captcha_wrap">  
                    <div class="captcha">  
            Drag to order  
                    </div>  
                    <ul id="sortable">  
                        <li class="captchaItem">1</li>  
                        <li class="captchaItem">2</li>  
                        <li class="captchaItem">3</li>  
                        <li class="captchaItem">4</li>  
                        <li class="captchaItem">5</li>  
                        <li class="captchaItem">6</li>  
                    </ul>  
                </div>  
                <a id="formsubmit" class="button">Register</a>  
            </fieldset>  
        </form>  
 
  

 
   JavaScript Code 
  
 
   <script type="text/javascript">  
            (  
            function($){  
  
                $.fn.shuffle = function() {  
                    return this.each(function(){  
                        var items = $(this).children();  
  
                        return (items.length)  
                            ? $(this).html($.shuffle(items,$(this)))  
                        : this;  
                    });  
                }  
  
                $.fn.validate = function() {  
                    var res = false;  
                    this.each(function(){  
                        var arr = $(this).children();  
                        res =    ((arr[0].innerHTML=="1")&&  
                            (arr[1].innerHTML=="2")&&  
                            (arr[2].innerHTML=="3")&&  
                            (arr[3].innerHTML=="4")&&  
                            (arr[4].innerHTML=="5")&&  
                            (arr[5].innerHTML=="6"));  
                    });  
                    return res;  
                }  
  
                $.shuffle = function(arr,obj) {  
                    for(  
                    var j, x, i = arr.length; i;  
                    j = parseInt(Math.random() * i),  
                    x = arr[--i], arr[i] = arr[j], arr[j] = x  
                );  
                    if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))  
                    else return arr;  
                }  
  
            })(jQuery);  
  
            $(function() {  
                $("#sortable").sortable();  
                $("#sortable").disableSelection();  
                $('ul').shuffle();  
  
                $("#formsubmit").click(function(){  
                    ($('ul').validate()) ? alert("Yes") : alert("No");  
                });  
            });  
        </script>  
 
  