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>

<sl-sortable-container disabled>
  <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 class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
</sl-sortable-container>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    gap: 10px;
    padding: 10px;
  }

  .grid div {
    display: block;
    padding: 10px;
    width: 100px;
    height: 100px;
    border: solid grey 1px;
  }

  .grid div:hover {
      border: solid var(--hds-color-border-primary) 1px;
  }
</style>