Question

假设我有一个包含数据的数组，它可能来自Ajax（但这里不需要这样做）。

使用该数组我生成UL元素的内容，我使用jQuery-UI进行UL排序

在客户端对它进行排序后，我想保持数组的顺序与UL同步。

这样做有一种优雅的方法吗？

var locations = [
  {name: 'point 0', location: [50.8674162,4.3772933]},
  {name: 'point 1', location: [50.8135113,4.3247394]},
  {name: 'point 2', location: [50.8771732,4.3544551]},
  {name: 'point 3', location: [50.8460485,4.3664706]}
];

function generateUl() {
  var content = '';
  for(var i in locations) {
    content += '<li>'+ locations[i].name +' ('+ locations[i].location.toString() +')</li>';
  }
  $('#points').html(content);

}

$(document).ready(function() {
  generateUl();
  $('#points').sortable({
    update: function(event, ui) {
      //$('#points li').each( function(e) {
      //});
      
      // so, I would like to see this display change after every update and have the order match
      $('#display').html(JSON.stringify(locations));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="points"></ul>
<div id="display"></div>

Answer 1

代码中的一些更改，以获得您正在寻找的内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="points"></ul>
<div id="display"></div>

li

我没有将li内容创建为字符串，而是创建了data('d')个元素，并使用update
在sortable对象的data函数内部 - 我从li节点返回{{1}}（基于它们的当前位置 - 这是新订单）

jQuery-UI可排序 - 更新后同步数组（模型）

1 个答案: