检查拖放列表的正确顺序

Question

我正在制作一个带有服务器网络应用程序的语言学习网站。我是 javascript 的初学者，我似乎找不到解决方案。

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

我需要的是一个函数，用户可以在he/she想检查句子顺序是否正确时调用。

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

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

谢谢！

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){
    var keyA = $(a).text();
    var keyB = $(b).text();    
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
    });
    var ul = $('#sortable');
    $.each(items, function(i, li){
      ul.append(li);
    });
};
function checkOrd() {
    var items = $('#sortable li').map(function(){
               return $.trim($(this).text());
            }).get();
    var itsort = $('#sortable li').map(function(){
               return $.trim($(this).text());
            }).get();
    itsort.sort();
    if (JSON.stringify(items) == JSON.stringify(itsort))
        alert("Right order!");
    else
        alert("Wrong order!");
};
  </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>

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

</body>
</html>

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

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

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

检查拖放列表的正确顺序

Check the correct order of drag and drop list

html

javascript

jquery

drag-and-drop

jquery-ui-draggable