@exmg/exm-sortable

<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