<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="https://github.com/tomalec/sortable-flexbox-list/raw/gh-pages/bower_components/webcomponentsjs/webcomponents.js"></script>
Import Custom Element:
<link rel="import" href="https://github.com/tomalec/sortable-flexbox-list/blob/gh-pages/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.
tomalec-sortable-body
is no longer supported with Polymer 1.2Attribute | 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. |
git checkout -b my-new-feature
git commit -m 'Add some feature'
git push origin my-new-feature
For detailed changelog, check Releases.
MIT License © Tomek Wytrebowicz