Jquery UI 可排序集顺序答案

【问题标题】：Jquery UI Sortable Set OrderJquery UI 可排序集顺序
【发布时间】：2018-08-08 08:19:47
【问题描述】：

我正在尝试创建列表项，我将排序后的列表保存到数据库中。

当我点击保存按钮时，我已经给了他们 id 我将他们的索引保存到他们的 id。

如何设置和我一样的顺序。

$("#get-index-button").on("click", function(){
  console.log($("#item1").index()+1);
  console.log($("#item2").index()+1);
  console.log($("#item3").index()+1);
  console.log($("#item4").index()+1);
  console.log($("#item5").index()+1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="sortable">
  <li class="ui-state-default" id="item1"></span>Item 1</li>
  <li class="ui-state-default" id="item2"></span>Item 2</li>
  <li class="ui-state-default" id="item3"></span>Item 3</li>
  <li class="ui-state-default" id="item4"></span>Item 4</li>
  <li class="ui-state-default" id="item5"></span>Item 5</li>
</ul>

<button id="get-index-button">Save</button>

如果我将这个列表保存在下面，我如何在保存到数据库后设置为这个顺序。

【问题讨论】：

如果我的回答对您有帮助，请接受并投赞成票，以帮助其他程序员在遇到相同问题时找到解决方案。大多数程序员看到接受或赞成的答案。

标签： jquery html jquery-ui-sortable

【解决方案1】：

你可以这样做：

// customOrder is your order that you saved in db 
var custumOrder = ["item4", "item2", "item1", "item3"];

var ul = $("#sortable");
var items = $("#sortable li");

// Changing li according custumOrder
for (var item of custumOrder) {
  ul.append($('#' + item + ''));
}

$("#sortable").sortable();

$("#get-index-button").on("click", function() {
  // Saving order of items
  var custumOrder = $("#sortable").sortable('toArray');
  alert(custumOrder.join(','));
});

Online demo (fiddleJs)

【讨论】：