<exm-sortable>

@exmg/exm-sortable

Enables drag and drop sorting of items in a list or table

!!! You should always handle @dom-order-change to update your local .items property to update sorted list properly

Installation

npm install @exmg/exm-sortable

Example Usage

Standard

<exm-sortable item-selector="div.box" @dom-order-change="${this.orderChange}">
  <div class="boxes">
    ${this.users.map((user) => { return html`
    <div class="box">${user.firstName}</div>
    `; })}
  </div>
</exm-sortable>

API

Slots

| Name | Description | | --------- | ---------------- | | default | Elements to sort |

Properties/Attributes

| Name | Type | Default | Description | | ------------------ | --------- | --------------------------------------- | ------------------------------------------------------------------------- | | handleSelector | string | None | Selector of the 'handle' to sort | | itemSelector | string | li | Selector of the items | | animationEnabled | boolean | false | The value that gets copied and displayed | | clonedClass | string | None | Class of the cloned element | | draggedClass | string | None | Class of the dragged element | | animationTiming | object | {duration: 200, easing: 'ease-out'} | The timing of the animation | | orientation | string | None | Whether or not to display the sortable element horizontally or vertically |

Methods

None

Styling

None

Additional references

• Additional Documentation

• Demo