JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 14
  • Score
    100M100P100Q30393F
  • License ISC

Sortable list

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

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