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
<script> var Component = function() { 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('sortable')); }); </script>