在使用可排序排序期间/之后显示使用 JSON 创建的列表中的项目位置

show item position in list created with json during/after sorting using Sortable

本文关键字：排序 创建 列表 JSON 项目 位置 之后 显示      更新时间：2023-09-26

我有一个用json生成的列表，它可以使用RubaXa/Sortable插件进行排序。我需要在对列表进行排序时在列表中添加项目位置。因此，当向上或向下移动项目时，项目位置指示器将发生变化。我对这个问题发表了一些评论。

可排序功能：

var listPos;
Sortable.create(list-group, {
  handle: '.driver',
  animation: 150,
  onMove: function (evt) {
    evt.dragged; 
    evt.draggedRect; 
    evt.related;
    evt.relatedRect;
    listPos = $(this).closest('.list-group').children('.list-group-item').index(this); // error finding the position in the list
    console.log(evt); // event is shown in the console
    console.log(listPos); // this is showing always -1 after the event
  }
});

该 json：

[
  {
    "name": "item 1",
    "acr": "it1"
  },
  {
    "name": "item 2",
    "acr": "it2"
  },
  {
    "name": "item 3",
    "acr": "it3"
  },
  {
    "name": "item 4",
    "acr": "it4"
  }
]

该 HTML：

<div class="col-md-4">
   <div id="printList" class="list-group">
  </div>
</div>

解析/打印 json：

var xmlhttp = new XMLHttpRequest();
var url = "/list.json";
xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
  }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
  showListPos = listPos; // showListPost in undefined
  var arr = JSON.parse(response);
  var i;
  var out = "";
  var drawPos = "<div class='position'>" + showListPos + "</div>"; //
  for (i = 0; i < arr.length; i++) {
    out += "<div class='list-group-item'>" +                 
            "<p>" + drawPos + "</p>"
            "<h3><span>" + arr[i].name + "</span>" +
            arr[i].acr +
            "</h3></div>";
  }
  out += "";
  document.getElementById("printList").innerHTML = out;
}

要在移动时获取移动的项目位置，您可以使用onEnd事件代替 .in onEnd onMove您可以使用 evt.newIndex .check 访问位置 .check 下面的代码片段

Sortable.create(sortTrue, {
  group: "sorting",
  sort: true,
  onEnd: function(evt) {
    $(evt.item).parent().find('.list-group-item').each(function() {
      $(this).find('span').text($(this).index() + 1);
    });
  }
});
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="result">Drage the list item to see position</div>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <!-- Latest Sortable -->
  <script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
  <!-- sort: true -->
  <div id="sortTrue" class="list-group">
    <div class="list-group-item"><span>1</span> foo</div>
    <div class="list-group-item"><span>2</span> bar</div>
    <div class="list-group-item"><span>3</span> baz</div>
    <div class="list-group-item"><span>4</span> qux</div>
    <div class="list-group-item"><span>5</span> quux</div>
  </div>

</body>
</html>

相关文章：