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 (11 months ago)
• Default Branch: main
• Last Pushed: 2024-01-31T00:47:52.000Z (11 months ago)
• Last Synced: 2024-10-31T06:34:54.418Z (2 months ago)
• Topics: json, lists, nested, nested-lists, sortable, sortable-lists, vanilla-javascript
• Language: JavaScript
• Homepage:
• Size: 1.05 MB
• Stars: 90
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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()`.