Jquery Сортировать и дать сообщение правильное или неправильное

Question

У меня есть элемент списка, который можно сортировать.

<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

Answer 1

В вашем примере вы никогда не обновите 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>

Вы также должны помнить о порядке операций.

Надежда, которая помогает.

Answer 2

Кажется, я пропустил последний заказ от пользователя после сортировки.

$(".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();