时间戳

首页 > 解决方案 > 为什么 query-ui 可排序功能无法正常工作？

javascript - 为什么 query-ui 可排序功能无法正常工作？

问题描述

我实现了一个可拖动的复选框下拉列表。如果我使用可排序更改功能获得拖动元素值。但它显示索引值是错误的。例如，在我的情况下，当我将列表元素拖到下拉列表的底部时，它会在控制台中显示索引值（值为 6）。但实际上是错误的。我只有 6 个元素，最终索引为 5。为什么显示错误的索引？

我将在这里给出完整的实现代码。

标签： javascriptjqueryjquery-uijquery-ui-sortable

解决方案

不要检查占位符；它的索引是关闭的，因为原始元素在被删除之前仍然被附加。

考虑以下。

$(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>

推荐阅读