随机的jQuery.sortable，是否将项目放在正确的位置？

Question

我将其构建为针对在线学生的自查。 真正的内容是订购历史事件。

现在，我有一个随机排列的有序列表，然后变成可排序的列表。 我什至设置好了它，以便在放下任何物品时，它会检查整个物品是否顺序正确。 参见jsfiddle：

http://jsfiddle.net/kking/ptgxedhh/2/

    var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}
var correctOrder = ["one", "two", "three", "four", "five", "six"];
$("#sortable").sortable({
    stop: function (event, ui) {
        console.log("item dropped");
        var order = $(this).sortable('toArray');
        console.log(order);
        for (i = 0; i < correctOrder.length; i++) {
            if (correctOrder[i] == order[i]) {
                console.log(i + " correct!");
            } else {
                console.log(i + " incorrect!");
                break;
            }
        }
    }
});
$("#sortable").disableSelection();

接下来，我需要检查是否最后放置的物品在正确的位置。 我不知道从哪里开始，否则我知道它属于停止功能。 我不确定使用我的数组是否更好，并询问放置的项目是否与正确的order ..或其他方法位于同一位置。 说实话，我不确定如何获得该放置项的数组位置。

任何帮助或指针表示赞赏！

Answer 1

您可以使用ui.item.index()删除索引。

 $(document).ready(function () { var ul = document.querySelector('ul'); for (var i = ul.children.length; i >= 0; i--) { ul.appendChild(ul.children[Math.random() * i | 0]); } var correctOrder = ["one", "two", "three", "four", "five", "six"]; $("#sortable").sortable({ stop: function (event, ui) { console.log("item dropped"); var order = $(this).sortable('toArray'); var droppedIndex = ui.item.index(); if (order[droppedIndex] === correctOrder[droppedIndex]) { alert('Correct!'); } else { alert('Incorrect.'); } for (i = 0; i < correctOrder.length; i++) { if (correctOrder[i] === order[i]) { console.log(i + " correct!"); } else { console.log(i + " incorrect!"); break; } } } }); $("#sortable").disableSelection(); }); 

  ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding: 5px; width: 150px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <ul id="sortable"> <li class="ui-state-default" id="one">1</li> <li class="ui-state-default" id="two">2</li> <li class="ui-state-default" id="three">3</li> <li class="ui-state-default" id="four">4</li> <li class="ui-state-default" id="five">5</li> <li class="ui-state-default" id="six">6</li> </ul>