<tomalec-sortable-list> is a Custom Element with sortable list, that uses CSS flexbox.
Maintained by Tomek Wytrębowicz.
Advanced examples:
Install the component using Bower:
$ bower install tomalec-sortable-list --save-
Import Web Components' polyfill, if needed:
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
-
Import Custom Element:
<link rel="import" href="bower_components/tomalec-sortable-list/src/tomalec-sortable-list.html">
-
Start using it!
<tomalec-sortable-list> <li>zero</li> <li>one</li> <li>two</li> </tomalec-sortable-list>
Please note, that
<style>,<template>, and text nodes will not be sortable.
| Attribute | Options | Default | Description |
|---|---|---|---|
disabled |
boolean | false | If set to true none of elements will be draggable. |
order |
string | "1,...,n" | Coma separated sequence of elements' order. By default as is in HTML. Please note that this is NOT a list of sorted indexes, rather a map where the key is index from HTML, and value is CSS order - position on screen. |
| Property | Type | Description |
|---|---|---|
disabled |
boolean | Is dragging disabled? |
order |
string | Coma separated sequence of elements' order. See above. |
For child nodes:
| Event Name | event.detail | Description |
|---|---|---|
change |
Triggered after every order change. |
| *String* `from` | Previous order
| *String* `to` | New order
| *Array* `orderArray` | New order as array
move | | Triggered after every item move.
| String from | Previous place in order,
| String to | New place in order,
| Array orderArray | New order as array,
| EventTarget item | DOM Node that was moved.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
For detailed changelog, check Releases.
MIT License © Tomek Wytrebowicz