Sortable Container

<sl-sortable-container>
  <sl-sortable-item>Item 1</sl-sortable-item>
  <sl-sortable-item>Item 2</sl-sortable-item>
  <sl-sortable-item>Item 3</sl-sortable-item>
</sl-sortable-container>

<sl-sortable-container id="order-change-example">
  <sl-sortable-item>Item 1</sl-sortable-item>
  <sl-sortable-item>Item 2</sl-sortable-item>
  <sl-sortable-item>Item 3</sl-sortable-item>
</sl-sortable-container>

<p id="order-change-result"></p>

<script>
  const container = document.getElementById('order-change-example');
  container.addEventListener('sl-change', (event) => {
    setTimeout(() => {
      document.getElementById('order-change-result').textContent =
        "New is order is: " +
        Array.from(container .querySelectorAll('sl-sortable-item'))
          .map(item => item.textContent)
          .join(', ');
    }, 100);
  });
</script>