Javascript 检查拖放列表的正确顺序_Javascript_Jquery_Html_Drag And Drop_Jquery Ui Draggable

Javascript 检查拖放列表的正确顺序

javascript jquery html

Javascript 检查拖放列表的正确顺序,javascript,jquery,html,drag-and-drop,jquery-ui-draggable,Javascript,Jquery,Html,Drag And Drop,Jquery Ui Draggable,我正在制作一个语言学习网站，里面有很多网络应用。我是javascript的初学者，似乎找不到解决方案这个特定的应用程序由一些可拖动的列表项组成，这些列表项将构成一个句子。列表项是随机列出的，目的是按照正确的顺序对它们进行排序，这样句子才有意义我需要的是一个函数，当用户想要检查句子顺序是否正确时，可以调用该函数 $（函数（）{ $（“#可排序”）.sortable（）； $（“#可排序”）.disableSelection（）； }); jQuery UI可排序-默认功能 #可排序{列表样

我正在制作一个语言学习网站，里面有很多网络应用。我是javascript的初学者，似乎找不到解决方案

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

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

$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});

jQuery UI可排序-默认功能
#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；}
#可排序li span{位置：绝对；左边距：-1.3em；}

第1项
第2项
第3项
第4项
第5项
第6项
第7项

给你：
<!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>


jQuery UI可排序-默认功能
#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；}
#可排序li span{位置：绝对；左边距：-1.3em；}
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});
函数sortItems（）{
var items=$（'#可排序li'）.get（）；
项目.排序（功能（a，b）{
var keyA=$（a）.text（）；
var keyB=$（b）.text（）；
if（keyAkeyB）返回1；
返回0；
});
var ul=$（“#可排序”）；
$。每个（项目、功能（i、li）{
ul.附加（li）；
});
};
函数checkOrd（）{
var items=$（'#可排序li'）.map（函数（）{
返回$.trim（$（this.text（））；
}).get（）；
var itsort=$（'#可排序li'）.map（函数（）{
返回$.trim（$（this.text（））；
}).get（）；
itsort.sort（）；
if（JSON.stringify（items）=JSON.stringify（itsort））
警惕（“正确的顺序！”）；
其他的
警告（“顺序错误！”）；
};

第1项
第2项
第3项
第4项
第5项
第6项
第7项

排序列表
支票

如果不需要按文本分组，可以使用按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>


jQuery UI可排序-默认功能
#可排序{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可排序li{margin:0 3px 3px 3px；padding:0.4em；padding left:1.5em；字体大小：1.4em；高度：18px；}
#可排序li span{位置：绝对；左边距：-1.3em；}
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});
函数sortItems（）{
var items=$（'#可排序li'）.get（）；
项目.排序（功能（a，b）{
返回parseInt（a.id）>parseInt（b.id）；
});
var ul=$（“#可排序”）；
$。每个（项目、功能（i、li）{
ul.附加（li）；
});
};
函数checkOrd（）{
var items=$（'#可排序li'）.map（函数（）{
返回$.trim（$（this.attr（'id'））；
}).get（）；
var itsort=$（'#可排序li'）.map（函数（）{
返回$.trim（$（this.attr（'id'））；
}).get（）；
itsort.sort（）；
if（JSON.stringify（items）=JSON.stringify（itsort））
警惕（“正确的顺序！”）；
其他的
警告（“顺序错误！”）；
};

协调
面包
字母
Sun
上升
空白
站点

排序列表
支票

我添加了所有的li和id，我们将使用它们来获得正确的顺序，并更新了脚本以获得它而不是文本。
这是正确的，但可能我不够清楚。我正在寻找订单是否正确的反馈。好的，稍等一下，我会这样做。@Ariel.H完成，看一看。如果我将
的内容更改为“Item n”以外的任何内容，“重新排序”按钮将不起作用。@Ariel.H是的，因为它使用文本来检测正确的订单，但您可以使用ID来检测正确的订单，请参阅我的最新答案。