https://github.com/sharedlabs/sortable-list

A web component for reorderable drag-and-drop lists on modern browsers and touch devices.
https://github.com/sharedlabs/sortable-list

lightweight polymer sortable webcomponents

Last synced: 15 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sharedlabs/sortable-list
• Owner: sharedlabs
• License: mit
• Created: 2016-10-01T11:40:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2019-08-15T16:58:21.000Z (over 6 years ago)
• Last Synced: 2024-06-11T19:12:39.496Z (over 1 year ago)
• Topics: lightweight, polymer, sortable, webcomponents
• Language: HTML
• Size: 2.5 MB
• Stars: 36
• Watchers: 4
• Forks: 21
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
[![License](https://img.shields.io/github/license/sharedlabs/sortable-list.svg?style=flat-square)](https://github.com/sharedlabs/sortable-list/blob/master/LICENSE.md)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=flat-square)](https://beta.webcomponents.org/element/sharedlabs/sortable-list)

_[Demo and API docs](https://www.webcomponents.org/element/sharedlabs/sortable-list/demo/demo/index.html)_

![GIF](https://zippy.gfycat.com/IncredibleBronzeKillerwhale.gif)

# sortable-list

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

```html

  
Item 1

  
Item 2

  
Item 3


...

onSortFinish(event) {

  const sortedItem = event.detail.target;

}

```

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

```html

  

    


  


```

---

### TODO:

- [ ] Allow sort of elements with different sizes #2