Evince - Responsive Admin Dashboard Template

JS

In order to use this plugin on your page you will need to include the following script in the page.


<script src="plugins/nestable/jquery.nestable.js"></script>
<script src="js/pages/ui-nestable.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy


<link href="plugins/nestable/nestable.css" rel="stylesheet" />

Item 1
Item 2
1. Item 3
2. Item 4
3. Item 5
  1. Item 6
  2. Item 7
  3. Item 8
4. Item 9
5. Item 10

Item 11
Item 12
Item 13
Item 14
Item 15
1. Item 16
2. Item 17
3. Item 18

Drag

Item 13
Drag

Item 14
Drag

Item 15
1. Drag
  
  Item 16
2. Drag
  
  Item 17
3. Drag
  
  Item 18

copy


<div id="nestable-menu" class="no-m no-p m-b-sm">
    <button type="button" class="btn btn-primary" data-action="expand-all">Expand All</button>
    <button type="button" class="btn btn-success" data-action="collapse-all">Collapse All</button>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="dd" id="nestable">
            <ol class="dd-list">
                <li class="dd-item" data-id="1">
                    <div class="dd-handle">Item 1</div>
                </li>
                <li class="dd-item" data-id="2">
                    <div class="dd-handle">Item 2</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="3">
                            <div class="dd-handle">Item 3</div>
                        </li>
                        <li class="dd-item" data-id="4">
                            <div class="dd-handle">Item 4</div>
                        </li>
                        <li class="dd-item" data-id="5">
                            <div class="dd-handle">Item 5</div>
                            <ol class="dd-list">
                                <li class="dd-item" data-id="6">
                                    <div class="dd-handle">Item 6</div>
                                </li>
                                <li class="dd-item" data-id="7">
                                    <div class="dd-handle">Item 7</div>
                                </li>
                                <li class="dd-item" data-id="8">
                                    <div class="dd-handle">Item 8</div>
                                </li>
                            </ol>
                        </li>
                        <li class="dd-item" data-id="9">
                            <div class="dd-handle">Item 9</div>
                        </li>
                        <li class="dd-item" data-id="10">
                            <div class="dd-handle">Item 10</div>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
    <div class="col-md-4">
        <div class="dd" id="nestable2">
            <ol class="dd-list">
                <li class="dd-item" data-id="11">
                    <div class="dd-handle">Item 11</div>
                </li>
                <li class="dd-item" data-id="12">
                    <div class="dd-handle">Item 12</div>
                </li>
                <li class="dd-item" data-id="13">
                    <div class="dd-handle">Item 13</div>
                </li>
                <li class="dd-item" data-id="14">
                    <div class="dd-handle">Item 14</div>
                </li>
                <li class="dd-item" data-id="15">
                    <div class="dd-handle">Item 15</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="16">
                            <div class="dd-handle">Item 16</div>
                        </li>
                        <li class="dd-item" data-id="17">
                            <div class="dd-handle">Item 17</div>
                        </li>
                        <li class="dd-item" data-id="18">
                            <div class="dd-handle">Item 18</div>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
    <div class="col-md-4">
        <div class="dd" id="nestable3">
            <ol class="dd-list">
                <li class="dd-item dd3-item" data-id="13">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">Item 13</div>
                </li>
                <li class="dd-item dd3-item" data-id="14">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">Item 14</div>
                </li>
                <li class="dd-item dd3-item" data-id="15">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">Item 15</div>
                    <ol class="dd-list">
                        <li class="dd-item dd3-item" data-id="16">
                            <div class="dd-handle dd3-handle">Drag</div>
                            <div class="dd3-content">Item 16</div>
                        </li>
                        <li class="dd-item dd3-item" data-id="17">
                            <div class="dd-handle dd3-handle">Drag</div>
                            <div class="dd3-content">Item 17</div>
                        </li>
                        <li class="dd-item dd3-item" data-id="18">
                            <div class="dd-handle dd3-handle">Drag</div>
                            <div class="dd3-content">Item 18</div>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
</div>

Nestable

JS

CSS