@exmg/exmg-sortable
v8.2.3
Published
Enables drag and drop sorting of items in a list or table
Downloads
344
Readme
<exmg-sortable>
@exmg/exmg-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/exmg-sortable
Example Usage
Standard
<exmg-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>
</exmg-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