检查拖放列表的正确顺序

问题描述 投票：1回答：1

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

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

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

$( 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>

谢谢！

javascript jquery html5 drag-and-drop jquery-ui-draggable
1个回答
0
投票

干得好：

<!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，我们将使用它来获得正确的顺序，并更新脚本以获取它而不是文本。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.