@exmg/exm-sortable NPM

`<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