@ppci/sortable-list

Sortable list

Table of contents

1. Installation
2. Usage
3. Properties
4. Events
5. Changelog

Installation

NPM

npm i @ppci/sortable-list

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci/sortable-list'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/sortable-list/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/sortable-list/builds/legacy.min.js" />

<!-- Component -->
<sortable-list
 .items=${Array}
 handleClass=".drag-handle"
></sortable-list>

Properties

Property	Type	Description	Possible Values
*items*	Array	An array of list items	```javascript [ Item 1 Handle , Item 2 Handle ] ```
handleClass	String	Pass a css classname as drag handle element. If this value is omitted the entire li will be draggable. **Make sure** to prefix classname with a dot. </td> <td></td>

Events

Name	Description	Payload
@end	Element dragging ended	```javascript { /* target list */ to, /* previous list */ from, /* element's old index within old parent */ oldIndex, /* element's new index within new parent */ newIndex, /* element's old index within old parent, only counting draggable elements */ oldDraggableIndex, /* element's new index within new parent, only counting draggable elements */ newDraggableIndex, /* the clone element */ clone, /* when item is in another sortable: `"clone"` if cloning, `true` if moving */ pullMode, } ```