@ppci-mock/sortable-list

Sortable list

Usage no npm install needed!

<script type="module">
  import ppciMockSortableList from 'https://cdn.skypack.dev/@ppci-mock/sortable-list';
</script>

README

Sortable list

Table of contents

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

Installation

NPM

npm i @ppci-mock/sortable-list

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

Usage

Javascript

import '@ppci-mock/sortable-list'

Browser

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

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/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, } ```