Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BMSVieira/ordena.js
Nested lists made easy!
https://github.com/BMSVieira/ordena.js
json lists nested nested-lists sortable sortable-lists vanilla-javascript
Last synced: about 2 months ago
JSON representation
Nested lists made easy!
- Host: GitHub
- URL: https://github.com/BMSVieira/ordena.js
- Owner: BMSVieira
- License: mit
- Created: 2024-01-29T13:47:35.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-01-31T00:47:52.000Z (8 months ago)
- Last Synced: 2024-06-08T08:37:17.076Z (3 months ago)
- Topics: json, lists, nested, nested-lists, sortable, sortable-lists, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 1.05 MB
- Stars: 88
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - ordena.js
README
Welcome to Ordena.js, a groundbreaking library that redefines the way we handle nested lists using pure vanilla JavaScript.
◼️ Demo:
-
https://bmsvieira.github.io/ordena.js
Features:
-
- 🔧 Fully Customizable
- 💪 No Dependencies, no Jquery, no Framework... built with VanillaJS
- 🌎 Tested in All Modern Browsers
- ⚙️ New Engine/Logic
- ⌨️ JSON Output
- 📱 Touch support (Coming soon)!
◼️ Installation (Browser):
-
1 - Include JavaScript Source.
```javascript
```
2 - Include Styles.
```javascript
```
3 - Set HTML.
```html
Item 1
Item 2
Item 2.1
Item 2.2
Item 5
Item 6
```
4 - Initilize.
```javascript
document.addEventListener("DOMContentLoaded", function() {
const demo = new Ordena({
selector: "#list"
// More configs...
});
});
```
◼️ Methods:
-
convertToJSON:
Outputs serialized list in JSON
```javascript
demo.convertToJSON();
```
refresh:
Refresh all draggable properties and defines new uniqueIds to all items.
Must be called whenever a new item is added to the list.
```javascript
demo.refresh();
```
◼️ Callbacks:
-
There are multiple callbacks you can use when building a new instance.
```javascript
// Called when drag started.
onDragStart: function(){ }
```
```javascript
// Called when drag ends.
onDragStop: function(){ }
```
◼️ Disable Item:
-
You can disable an item by using class `od-disabled`
This item will not be able to dragged or moved.
```html
Item to be disabled
```
◼️ Drag to delete:
-
You can have multiple elements that are allowed to delete an item, as long as they share the same class. (See demo)
To define a delete-class, it must be done when instantiating Ordena, in the config property.
```javascript
config : {
deleteItems : {
class: "your-delete-class", // Class wich elements must have to be allowed to delete an item
onComplete: function(){ }
}
}
```
All elements allowed to delete items must be inside the `od-list` element, and everything dragged into them will be `remove()`.