aConic Admin Documentation - v1.0

Version - 1.0.0 Help
Notes

aConic is a Static HTML Template

SortableJS

SortableJS JavaScript library for reorderable drag-and-drop lists.
SortableJS documentation

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                                
    <script src="../node_modules/sortablejs/Sortable.min.js"></script>
                            

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                                
    <script>
        new Sortable(example1, {
            animation: 150,
            ghostClass: 'blue-background-class'
        });
    </script>
                            

Simple list example

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
                                            
    <div id="jsSortable" class="list-group">
        <div class="list-group-item">Item 1</div>
        <div class="list-group-item">Item 2</div>
        <div class="list-group-item">Item 3</div>
        <div class="list-group-item">Item 4</div>
        <div class="list-group-item">Item 5</div>
        <div class="list-group-item">Item 6</div>
    </div> 
                                        
                                            
    <script>
        new Sortable(jsSortable, {
            animation: 150
        });
    </script> 
                                        

Shared lists

Use "group": "listGroupName"

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
                                            
    <div class="row">
        <div class="col-md-6">
          <!-- list group -->
          <div id="jsSortableLeft" class="list-group">
            <div class="list-group-item">Item 1</div>
            <div class="list-group-item">Item 2</div>
            <div class="list-group-item">Item 3</div>
            <div class="list-group-item">Item 4</div>
            <div class="list-group-item">Item 5</div>
            <div class="list-group-item">Item 6</div>
          </div>
           <!-- end list group -->
        </div>
      
        <div class="col-md-6">
         <!-- list group -->
          <div id="jsSortableRight" class="list-group">
            <div class="list-group-item bg-light">Item 1</div>
            <div class="list-group-item bg-light">Item 2</div>
            <div class="list-group-item bg-light">Item 3</div>
            <div class="list-group-item bg-light">Item 4</div>
            <div class="list-group-item bg-light">Item 5</div>
            <div class="list-group-item bg-light">Item 6</div>
          </div>
           <!-- end list group -->
        </div>
    </div> 
                                        
                                            
    <script>
        new Sortable(jsSortableLeft, {
            group: 'shared', // set both lists to same group
            animation: 150
        });

        new Sortable(jsSortableRight, {
            group: 'shared',
            animation: 150
        });
    </script> 
                                        

Disabling Sorting

Try sorting the list on the left. It is not possible because it has it's sort option set to false. However, you can still drag from the list on the left to the list on the right.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
                                            
    <div class="row">
        <div class="col-md-6">
            <!-- list group -->
            <div id="disablingSortingLeft" class="list-group">
            <div class="list-group-item">Item 1</div>
            <div class="list-group-item">Item 2</div>
            <div class="list-group-item">Item 3</div>
            <div class="list-group-item">Item 4</div>
            <div class="list-group-item">Item 5</div>
            <div class="list-group-item">Item 6</div>
          </div>
          <!-- end list group -->
        </div>
      
        <div class="col-md-6">
            <!-- list group -->
            <div id="disablingSortingRight" class="list-group">
            <div class="list-group-item bg-light">Item 1</div>
            <div class="list-group-item bg-light">Item 2</div>
            <div class="list-group-item bg-light">Item 3</div>
            <div class="list-group-item bg-light">Item 4</div>
            <div class="list-group-item bg-light">Item 5</div>
            <div class="list-group-item bg-light">Item 6</div>
          </div>
          <!-- end list group -->
        </div>
    </div> 
                                        
                                            
    <script>
        new Sortable(disablingSortingLeft, {
            group: {
                name: 'disablingSorting',
                pull: 'clone',
                put: false // Do not allow items to be put into this list
            },
            animation: 150,
            sort: false // To disable sorting: set sort to false
        });

        new Sortable(disablingSortingRight, {
            group: 'disablingSorting',
            animation: 150
        });
    </script> 
                                        

Handle

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
                                            
    <div id="handle" class="list-group">
        <div class="list-group-item">
            <i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 1
        </div>
        <div class="list-group-item">
            <i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 2
        </div>
        <div class="list-group-item">
            <i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 3
        </div>
        <div class="list-group-item">
            <i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 4
        </div>
        <div class="list-group-item">
            <i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 5
        </div>
        <div class="list-group-item">
            <i class="handle bi-grip-horizontal list-group-icon me-3"></i> Item 6
        </div>
    </div> 
                                        
                                            
    <script>
        new Sortable(handle, {
            handle: '.handle', // handle's class
            animation: 150
        });
    </script> 
                                        

Multiple dates

Use multiple mode.

1
2
3
4
5
6
7
8
9
10
11
12
                                            
    <div id="jsSortableGrid" class="row">
        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">1</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">2</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">3</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">4</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">5</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">6</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">7</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">8</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">9</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">10</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">11</div>
            </div>
        </div>

        <div class="col-md-2 mb-3">
            <div class="card">
            <div class="card-body text-center">12</div>
            </div>
        </div>
    </div> 
                                        
                                            
    <script>
        new Sortable(jsSortableGrid, {
            animation: 150
        });
    </script> 
                                        

Nested

Item 1
Item 2
Item 3
Item 3.1
Item 3.2
Item 3.3
Item 3.4
Item 4
Item 5
Item 6
                                            
    <div id="jsSortableNested" class="list-group nested-sortable">
        <div class="list-group-item">Item 1</div>
        <div class="list-group-item">Item 2</div>
        <div class="list-group-item">
            <h6>Item 3</h6>

            <div id="jsSortableNestedSub" class="list-group nested-sortable">
                <div class="list-group-item">Item 3.1</div>
                <div class="list-group-item">Item 3.2</div>
                <div class="list-group-item">Item 3.3</div>
                <div class="list-group-item">Item 3.4</div>
            </div>
        </div>
        <div class="list-group-item">Item 4</div>
        <div class="list-group-item">Item 5</div>
        <div class="list-group-item">Item 6</div>
    </div> 
                                        
                                            
    <script>
        new Sortable(jsSortableNested, {
            group: 'nestedShared',
            animation: 150
        });
        new Sortable(jsSortableNestedSub, {
            group: 'nestedShared',
            animation: 150
        });
    </script>