why query-ui sortable function is not working correctly?

Question

I implement a draggable checkbox dropdown list. If i get the dragging element value using sortable change function. but it shows index values are wrong. For example in my case when i drag the list element to bottom in the dropdown list it shows index value in the console (value is 6). But actually it is wrong. I have only 6 element and final index is 5. Why is it show wrong index?

I will give full implementation code Here.

Answer 1

Do not examine the Placeholder; it's index is off due to the original element still being attached until it is dropped.

Consider the following.

$(function() {
  $(".dropdown-menu").sortable({
    start: function(event, ui) {
      console.log('start', ui.item.index());
      ui.item.data('start_pos', ui.item.index());
    },
    change: function(event, ui) {
      console.log('start', ui.item.data('start_pos'), "index", ui.item.index());
    },
    update: function(event, ui) {
      console.log('start', ui.item.data('start_pos'), "index", ui.item.index());
    }
  });
  $(".dropdown-menu").disableSelection();
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div>
  <div class="btn-group show">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Columns <b class="caret"></b>
          </button>
    <ul class="dropdown-menu dropdown-menu-right ui-sortable show" id="colsDrop" style="position: absolute; transform: translate3d(-10px, 38px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="bottom-end">

      <li class="ui-sortable-handle">
        <div class="checkbox">
          <label>
                  <input checked="" type="checkbox" class="toggle-vis" data-column="Position"> Position
                </label>
        </div>
      </li>
      <li class="ui-sortable-handle" style="">
        <div class="checkbox">
          <label>
                  <input checked="" type="checkbox" class="toggle-vis" data-column="Name"> Name
                </label>
        </div>
      </li>
      <li class="ui-sortable-handle">
        <div class="checkbox">
          <label>
                  <input checked="" type="checkbox" class="toggle-vis" data-column="Office"> Office
                </label>
        </div>
      </li>
      <li class="ui-sortable-handle">
        <div class="checkbox">
          <label>
                  <input checked="" type="checkbox" class="toggle-vis" data-column="Age"> Age
                </label>
        </div>
      </li>
      <li class="ui-sortable-handle">
        <div class="checkbox">
          <label>
                  <input checked="" type="checkbox" class="toggle-vis" data-column="Start Date"> Start date
                </label>
        </div>
      </li>
      <li class="ui-sortable-handle">
        <div class="checkbox">
          <label>
                  <input checked="" type="checkbox" class="toggle-vis" data-column="Salary"> Salary
                </label>
        </div>
      </li>
    </ul>
  </div>
</div>