Package Exports
- @ppci/sortable-list
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ppci/sortable-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Sortable list
Table of contents
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
[
|
handleClass | String |
Pass a css classname as drag handle element. If this
value is omitted the entire li will be draggable.
|
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, } ``` |