Question

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

这是我的Jquery代码：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

在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');
            }

          }
        });

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

1 个答案: