I have an ordered list that can be rearranged.
<div id="reImbursement_msg" style="display: none;"></div>
<div>
<ul class="sortable reImbursementdiv cur">
<li id="sort_five">alpha</li>
<li id="sort_one">beta</li>
<li id="sort_four">gamma</li>
<li id="sort_three">thita</li>
<li id="sort_two">pie</li>
</ul>
</div>
My aim is to show a message when users reorder the list. I am comparing two arrays to determine if the order is correct, but it always displays "Incorrect Order" even if the arrays match.
var correctOrder = ["sort_one", "sort_two", "sort_three", "sort_four", "sort_five"];
var userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
return i.id
});
function arraysEqual(arr1, arr2) {
if (arr1.length !== arr2.length)
return false;
for (var i = arr1.length; i--;) {
if (arr1[i] !== arr2[i])
return false;
}
return true;
}
$(".sortable").sortable({
update: function(event, ui) {
if (arraysEqual(correctOrder, userOrder)) {
showMsg("reImbursement_msg", "Correct Order", "success");
} else {
showMsg("reImbursement_msg", "Incorrect Order", "danger");
console.log($(".sortable.reImbursementdiv li").toArray().map(function(i) {
return i.id
}));
}
return true;
}
}).disableSelection();
function showMsg(box, msg, msgStatus) {
$("#" + box)
.removeClass()
.show()
.addClass("alert alert-" + msgStatus)
.html(msg);
}
I have provided a codepen demo as requested: