javascript - 随机 jQuery.sortable，将项目放置在正确的位置吗？

Question

我将其构建为在线学生的 self 检查。真正的内容是对历史事件进行排序。

现在我有一个随机列表，然后变成可排序列表。我什至将其设置为当任何元素掉落时，它都会检查整个元素的顺序是否正确。请参阅 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();

接下来我需要它做的是检查最后掉落的元素是否位于正确的位置。我不知道从哪里开始，除了我知道它属于停止功能。我不确定使用我的数组是否更好，并询问放置的项目是否与正确的顺序数组处于相同的位置..或其他方法。说实话，我不确定如何获得该掉落元素的数组位置。

感谢任何帮助或指示!

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>