---
title: "Create Reactive Sortable Lists with LemonadeJS | v5 docs"
description: "LemonadeJS v5 archive. Design interactive, reactive sortable lists using the intuitive LemonadeJS Sortable JavaScript plugin."
source: https://lemonadejs.com/docs/v5/plugins/sortable/
---

JavaScript Sortable
========

This library has 1.3 Kbytes

A optimized javascript sortable list using LemonadeJS.  
  
Documentation
-------------

### Attributes

| Attribute            | Description                                   |
|----------------------|-----------------------------------------------|
| data: Array <Object> | Data should be an array of objects.           |
| draggable?: boolean  | Enable or disable drag and drop.              |
| onchange?: function  | The method is fired when a drag event occurs. |

Usage example
-------------

### Source code

```html
<div id='root'></div>

<script>
function Component() {
    let self = {
        data: [
            { title: 'Item A' },
            { title: 'Item B' },
            { title: 'Item C' },
        ],
        draggable: true
    };

    var template = `
        <ul style="padding-inline-end: 40px; user-select: none; list-style: none;">
            <Sortable data="{{self.data}}" draggable={{self.draggable}}>
                <li style="cursor: pointer; width: 200px; border: 1px solid grey; background: #eee;">{{self.title}}</li>
            </Sortable>
        </ul>`;

    return lemonade.element(template, self, { Sortable });
}

document.addEventListener("DOMContentLoaded", function() {
    lemonade.render(Component, document.getElementById('root'));
});
</script>
```

## Related Tools

- [JavaScript Drag and Drop](https://jsuites.net/docs/drag-and-drop) - Standalone drag and drop functionality for lists and elements