排序完成后，我似乎错过了用户的最新订单。
我有一个可排序的列表项。
<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>
现在我想要的是每当用户进行排序时都显示一条消息。即使数组匹配，它也只显示一条消息"顺序不正确"。
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) == true) {
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);
}
我已根据要求制作了一支钢笔。
Codepen链接演示
在您的示例中，您从不更新userOrder，因此正在比较的顺序永远不会改变。请查看：
$(function() {
var correctOrder = ["sort_one", "sort_two", "sort_three", "sort_four", "sort_five"];
var userOrder = [];
function arraysEqual(arr1, arr2) {
var result = true;
if (arr1.length === arr2.length) {
$.each(arr1, function(key, val) {
result = result && (arr1[key] === arr2[key]);
});
} else {
result = false;
}
console.log(arr1, arr2, result);
return result;
}
function showMsg(box, msg, msgStatus) {
$(box)
.removeClass()
.show()
.addClass("alert alert-" + msgStatus)
.html(msg);
}
$(".sortable").sortable({
update: function(event, ui) {
userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
return i.id
});
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();
userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
return i.id
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="reImbursement_msg" style="display: none;"></div>
<div>
<ul class="sortable reImbursementdiv cur">
<li id="sort_five">five</li>
<li id="sort_one">one</li>
<li id="sort_four">four</li>
<li id="sort_three">three</li>
<li id="sort_two">two</li>
</ul>
</div>你还必须注意操作的顺序。
希望能有所帮助。
$(".sortable").sortable({
update: function(event, ui) {
var userOrder = $(".sortable.reImbursementdiv li").toArray().map(function(i) {
return i.id
});
if (arraysEqual(correctOrder, userOrder) == true) {
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();