首页>>表单>>拖动排序 验证码(2014-04-24)

拖动排序 验证码

拖动排序 验证码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <form class="registration">  
  2.   
  3.             <fieldset>  
  4.                 <legend>拖动排序</legend>  
  5.                 <div class="captcha_wrap">  
  6.                     <div class="captcha">  
  7.             Drag to order  
  8.                     </div>  
  9.                     <ul id="sortable">  
  10.                         <li class="captchaItem">1</li>  
  11.                         <li class="captchaItem">2</li>  
  12.                         <li class="captchaItem">3</li>  
  13.                         <li class="captchaItem">4</li>  
  14.                         <li class="captchaItem">5</li>  
  15.                         <li class="captchaItem">6</li>  
  16.                     </ul>  
  17.                 </div>  
  18.                 <a id="formsubmit" class="button">Register</a>  
  19.             </fieldset>  
  20.         </form>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             (  
  3.             function($){  
  4.   
  5.                 $.fn.shuffle = function() {  
  6.                     return this.each(function(){  
  7.                         var items = $(this).children();  
  8.   
  9.                         return (items.length)  
  10.                             ? $(this).html($.shuffle(items,$(this)))  
  11.                         : this;  
  12.                     });  
  13.                 }  
  14.   
  15.                 $.fn.validate = function() {  
  16.                     var res = false;  
  17.                     this.each(function(){  
  18.                         var arr = $(this).children();  
  19.                         res =    ((arr[0].innerHTML=="1")&&  
  20.                             (arr[1].innerHTML=="2")&&  
  21.                             (arr[2].innerHTML=="3")&&  
  22.                             (arr[3].innerHTML=="4")&&  
  23.                             (arr[4].innerHTML=="5")&&  
  24.                             (arr[5].innerHTML=="6"));  
  25.                     });  
  26.                     return res;  
  27.                 }  
  28.   
  29.                 $.shuffle = function(arr,obj) {  
  30.                     for(  
  31.                     var j, x, i = arr.length; i;  
  32.                     j = parseInt(Math.random() * i),  
  33.                     x = arr[--i], arr[i] = arr[j], arr[j] = x  
  34.                 );  
  35.                     if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))  
  36.                     else return arr;  
  37.                 }  
  38.   
  39.             })(jQuery);  
  40.   
  41.             $(function() {  
  42.                 $("#sortable").sortable();  
  43.                 $("#sortable").disableSelection();  
  44.                 $('ul').shuffle();  
  45.   
  46.                 $("#formsubmit").click(function(){  
  47.                     ($('ul').validate()) ? alert("Yes") : alert("No");  
  48.                 });  
  49.             });  
  50.         </script>  

 


原文地址:http://www.freejs.net/article_biaodan_317.html