Как динамически изменить порядок элементов div в angular?

Question

В моей форме несколько элементов div. Я должен динамически изменить порядок элементов div в пользовательском интерфейсе с помощью перетаскивания

Например: ниже указаны мои элементы div

<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>

Я хочу изменить порядок элементов div с помощью перетаскивания , Например: я должен поставить 6-й див в 2-ю позицию, аналогично 4-й в 1-й и так далее. Я не смог узнать, как изменить положение div. Может ли кто-нибудь помочь достичь этого

Answer 1

С css вы можете использовать flex.

.box {
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) { order: 2; }
.box :nth-child(2) { order: 3; }
.box :nth-child(3) { order: 1; }
.box :nth-child(4) { order: 3; }
.box :nth-child(5) { order: 1; }

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Для заказа с помощью перетаскивания есть опция jquery:

https://jqueryui.com/draggable/#sortable

  <script>
  $( function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "ul, li" ).disableSelection();
  } );
  </script>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

РЕДАКТИРОВАТЬ 1

Теперь, когда вы отредактировали свой заголовок для angular вот ссылка для перетаскивания https://material.angular.io/cdk/drag-drop/overview#reordering -списки