Skip to content

A web component for reorderable drag-and-drop lists on modern browsers and touch devices.

License

Notifications You must be signed in to change notification settings

DrNiels/sortable-list

 
 

Repository files navigation

This is a Polymer 3 conversion of the sortable-list element from pdgago (https://github.com/sharedlabs/sortable-list) with some minor adjustments. The readme was not updated and is still the one from the original sotable-list element!

License Published on webcomponents.org

Demo and API docs

GIF

sortable-list

sortable-list is a custom element that allows you to sort an element from a list by dragging it.

<sortable-list on-sort-finish="_onSortFinish" dragging="{{dragging}}">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</sortable-list>

...
onSortFinish(event) {
  const sortedItem = event.detail.target;
}

When using a dom-repeat you must specify which items are sortable.

<sortable-list sortable=".item">
  <dom-repeat>
    <div class="item"></div>
  </dom-repeat>
</sortable-list>

TODO:

  • Allow sort of elements with different sizes #2

About

A web component for reorderable drag-and-drop lists on modern browsers and touch devices.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.9%
  • HTML 8.1%