GitHub - BMSVieira/ordena.js: Nested lists made easy!

Repository files navigation

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)!
• 📚 Multi list (Coming soon)!

◼️ Installation (Browser):

1 - Include JavaScript Source.

<script src="path/to/ordena.js"></script>

2 - Include Styles.

<link rel="stylesheet" href="path/to/ordena.css">

3 - Set HTML.

<!-- Main Element -->
<div class="od-list od-dark" id="list">
      <!-- Item -->
      <div class="od-item od-c-item">
         <div class="od-name">Item 1</div>
      </div>
      <!-- Item -->
      <div class="od-item od-c-item">
         <div class="od-name">Item 2</div>

            <!-- Nested Item -->
            <div class="od-item od-c-item od-nested">
               <div class="od-name">Item 2.1</div>
            </div>

            <!-- Nested Item -->
            <div class="od-item od-c-item od-nested">
               <div class="od-name">Item 2.2</div>
            </div>
      </div>
      <!-- Item -->
      <div class="od-item od-c-item">
         <div class="od-name">Item 5</div>
      </div>
      <!-- Item -->
      <div class="od-item od-c-item">
         <div class="od-name">Item 6</div>
      </div>
 </div>

4 - Initilize.

document.addEventListener("DOMContentLoaded", function() {
   const demo = new Ordena({
      selector: "#list"
   });
});

◼️ Methods:

convertToJSON: Outputs serialized list in JSON

demo.convertToJSON();

◼️ Callbacks:

There are multiple callbacks you can use when building a new instance.

// Called when drag started.
onDragStart: function(){ <!-- CODE HERE --> }

// Called when drag ends.
onDragStop: function(){ <!-- CODE HERE --> }