Question

我正在建立一个带有服务器网络应用的语言学习网站。我是javascript的初学者，我似乎无法找到解决方案。

这个特殊的应用程序由一些可拖动的列表项组成，这些列表项将组成一个句子。列表项是随机列出的，目的是按正确的顺序对它们进行排序，这样句子才有意义。

我需要的是一个功能，当用户想要检查句子顺序是否正确时，用户可以调用该功能。

＆＃13;

$( function() {
   $( "#sortable" ).sortable();
   $( "#sortable" ).disableSelection();
});

＆＃13;

  <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Sortable - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <style>
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable li span { position: absolute; margin-left: -1.3em; }
      </style>
      <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>
    </head>
    <body>
     
    <ul id="sortable">
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>
  </body>
    </html>

＆＃13;

谢谢！

Answer 1

你走了：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <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>
    $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    function sortItems() {
    var items = $('#sortable li').get();
    items.sort(function(a,b){
    return parseInt(a.id) > parseInt(b.id);
    });
    var ul = $('#sortable');
    $.each(items, function(i, li){
      ul.append(li);
    });
};
function checkOrd() {
    var items = $('#sortable li').map(function(){
               return $.trim($(this).attr('id'));
            }).get();
    var itsort = $('#sortable li').map(function(){
               return $.trim($(this).attr('id'));
            }).get();
    <!-- console.log(items); -->
    <!-- console.log(itsort); -->
    itsort.sort();
    if (JSON.stringify(items) == JSON.stringify(itsort))
        alert("Right order!");
    else
        alert("Wrong order!");
};
  </script>
</head>
<body>

<ul id="sortable">
  <li id="1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Coockies</li>
  <li id="2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Bread</li>
  <li id="3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Letter</li>
  <li id="4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sun</li>
  <li id="5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Rise</li>
  <li id="6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Blank</li>
  <li id="7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Site</li>
</ul>

<button onclick="sortItems();">Sort lists</button>
<button onclick="checkOrd();">Check order</button>

</body>
</html>

如果您不需要按文字分组，可以使用ID进行分组：

        User id: <input type ="text" name = "userid" required>
        Password: <input type = "password" name = "password" required>

我添加了所有 li 的id和id，我们将用它来获得正确的顺序，并更新脚本以获取它而不是文本。

检查拖放列表的正确顺序

1 个答案: