javascript - 从数组中按ID动态排序div

Question

我的 angularjs 上有拖放 DIV网络应用程序。用户可以根据 div 位置对 div 进行排序或选中复选框以添加新的 div，我采用 DIV ID 并将数组发送到 API，因此当用户再次回来时，一切都像他一样。这是我发送给 API 的内容，没问题

["D", "A", "C"]

问题是当用户回来时，我从 API 数组中获取，我需要像在响应数组中一样对所有内容进行排序。响应与发送数组相同。这是我的 HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="dragulaBox" 
dragula='"sixth-bag"'>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="A" ng-if="A">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="B" ng-if="B">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="C" ng-if="C">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="D" ng-if="D">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="E" ng-if="E">
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" id="F" ng-if="F">
</div>
</div>

为此，我不使用 ng-repeat，因为我有用于添加新 div 的复选框。

<div class="checkbox-inline">
        <input type="checkbox" class="" id="A" value="A" ng-checked="A" ng-
model="A")"><label>A</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="B" value="B" ng-checked="B" ng-
model="B")"><label>B</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="C" value="C" ng-checked="C" ng-
model="C")"><label>C</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="D" value="D" ng-checked="D" ng-
model="D")"><label>D</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="E" value="E" ng-checked="E" ng-
model="E")"><label>E</label>
</div>
<div class="checkbox-inline">
        <input type="checkbox" class="" id="F" value="F" ng-checked="F" ng-
model="F")"><label>F</label>
</div>

我编写代码以显示数组中唯一具有 ID 的 DIV，但我不知道如何完全像数组一样进行排序。有人可以帮我对 div 进行排序吗？

谢谢

编辑:我用下面的答案中的指令尝试这个，但这不起作用

app.directive("arrangeDiv", function(){
return {
    restrict: "A",
    link: function (scope, element, atts ){
        element.sort(function (elem1, elem2) {
            return parseInt(elem1.id) > parseInt(elem2.id);
        }).each(function () {
            var element = $(this);
            element.remove();
            $(element).appendTo("#dragulaBox");
        });

    }
  }
 })

在parrent div中，我在指令属性中传递数组

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="dragulaBox" 
  dragula='"sixth-bag"' arrange-div="poredakGrafova"></div>

这是 API 响应的数组["B","F","E","D"]

Answer 1

jquery div 排序简单:--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="res">
  <div id="3">text 3</div>
  <div id="4">text 4</div>
  <div id="1">text 1</div>
  <div id="2">text 2</div>
</div>
<script>
$("#res div").sort(function (elem1, elem2) {
    return parseInt(elem1.id) > parseInt(elem2.id);
}).each(function () {
    var element = $(this);
    element.remove();
    $(element).appendTo("#res");
});

</script>