tabler/preview/pages/sortable.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
---

<DefaultLayout title="Sortable" pageHeader="SortableJS" pageMenu="plugins.sortable" pageLibs={['sortablejs']}>
  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Basic usage</CardTitle>
            <CardSubtitle>Drag to reorder items within a single list.</CardSubtitle>
          </div>
        </CardHeader>
        <CardBody>
          <ListGroup as="ul" data-sortable='{"animation":150}'>
            <ListGroupItem as="li">Element A</ListGroupItem>
            <ListGroupItem as="li">Element B</ListGroupItem>
            <ListGroupItem as="li">Element C</ListGroupItem>
            <ListGroupItem as="li">Element D</ListGroupItem>
          </ListGroup>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardHeader>
          <div>
            <CardTitle>Two lists with drag and drop</CardTitle>
            <CardSubtitle>Move items between two connected lists.</CardSubtitle>
          </div>
        </CardHeader>
        <CardBody>
          <div class="row g-3">
            <div class="col-sm-6">
              <ListGroup as="ul" data-sortable='{"group":"shared","animation":150}'>
                <ListGroupItem as="li">Item 1</ListGroupItem>
                <ListGroupItem as="li">Item 2</ListGroupItem>
                <ListGroupItem as="li">Item 3</ListGroupItem>
              </ListGroup>
            </div>
            <div class="col-sm-6">
              <ListGroup as="ul" data-sortable='{"group":"shared","animation":150}'>
                <ListGroupItem as="li">Item A</ListGroupItem>
                <ListGroupItem as="li">Item B</ListGroupItem>
                <ListGroupItem as="li">Item C</ListGroupItem>
              </ListGroup>
            </div>
          </div>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>