如何在创建数组之前创建Randomize选项

在我的UI中，我创建了一个选择和重新排序帮助jquery，HTML，CSS之后，我需要创建一个正确的序列1,2,3并在序列显示正确的按钮时是正确的，并且在序列错误时显示错误的按钮。如何在创建数组之前创建Randomize选项

这里是我的jQuery代码：

$(function() { 
 
    $("#sortable").sortable({ 
 
    revert: true 
 
    }); 
 
    $("#draggable").draggable({ 
 
    connectToSortable: "#sortable", 
 
    helper: "clone", 
 
    revert: "invalid" 
 
    }); 
 
    $("ul, li").disableSelection(); 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-bottom: 10px; 
 
} 
 

 
.ui_color { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    width: 570px; 
 
    height: 47px; 
 
    background-color: #46B8DA; 
 
    border: 1px solid #c5c5c5; 
 
    font-weight: normal; 
 
    color: #454545; 
 
} 
 

 
.header { 
 
    border: 1px solid black; 
 
    width: 569px; 
 
    height: 37px; 
 
    padding: 17px 0 0 11px; 
 
    margin-left: 6px; 
 
} 
 

 
.bottom { 
 
    display: inline; 
 
    float: left; 
 
    border-right: 1px solid; 
 
    padding: 0px 6px 1px 6px; 
 
    margin-right: 7px; 
 
} 
 

 
.tablelike { 
 
    height: 450px; 
 
} 
 

 
.full_border { 
 
    border: 1px solid #800080; 
 
    width: 592px; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Draggable + Sortable</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="jq.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script src="jq_assingment.js"></script> 
 
</head> 
 

 
<body> 
 
    <form name="drag_drop" id="drag_drop" class="full_border"> 
 
    <div class="header"> 
 
     <span id="draggable" class="border">Choose & Re-order</span> 
 
    </div> 
 
    <div> 
 
     <ul id="sortable" class="tablelike"> 
 
     <li class="ui_color" value="1" correct_seq="">1.Typically a sentence contain a subject and practice.</li> 
 
     <li class="ui_color" value="2">2.Although it may make little sense taken in isolation out of context.</li> 
 
     <li class="ui_color" value="3">3.A sentence is a set of words that in principle tells a complete thought,</li> 
 
     </ul> 
 
    </div> 
 
    <div class=""> 
 
     <ul> 
 
     <li class="bottom">Review</li> 
 
     <li>Correct answer</li> 
 
     </ul> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

来源

2017-07-25 punit saharawat

'选择和重新order'可拖动？ –

在sortable使用update方法检查序列的顺序。

例如，

 $("#sortable").sortable({ 
      revert: true, 

      update: function(event, ui){ 
      var currentOrder = '1,2,3'; 
      var sortOrder = []; 
      $(event.target).find('li').each(function(){ 
       sortOrder.push($(this).attr('value')); 
      }) 
      if(sortOrder.join(',') === currentOrder){ 
       alert('correct Answer'); 
      }else{ 
       alert('wrong Answer'); 
      } 

      } 
     });

来源

2017-07-25 07:47:02

如何在创建数组之前创建Randomize选项

回答

相关问题