Vendor : Nestable
Drag & drop hierarchical list with mouse and touch compatibility. Smarty added ajax supported!
- License: BSD & MIT license
- https://github.com/dbushell/Nestable
src/js/vendors/vendor.nestable.js
Nestable Defaults
No Handler
-
Item 1
-
Item 2
- Item 3
- Item 4
-
Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
-
Item 11
-
Item 12
With Handler
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
Item 6
-
Item 7
-
Item 6
-
-
Item 9
-
Item 10
-
-
Item 11
-
Item 12
<!-- no handler -->
<div class="nestable dd">
<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>
<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>
</ol>
<textarea class="form-control"></textarea>
</div>
<!-- with handler -->
<div class="nestable dd">
<ol class="dd-list">
<li class="dd-item dd-handle-custom" data-id="1">
<div class="dd-content">Item 1</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="2">
<div class="dd-content">Item 2</div>
<div class="dd-handle fi fi-list"></div>
<ol class="dd-list">
<li class="dd-item dd-handle-custom" data-id="3">
<div class="dd-content">Item 3</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="4">
<div class="dd-content">Item 4</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="5">
<div class="dd-content">Item 5</div>
<div class="dd-handle fi fi-list"></div>
<ol class="dd-list">
<li class="dd-item dd-handle-custom" data-id="6">
<div class="dd-content">Item 6</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="7">
<div class="dd-content">Item 7</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="8">
<div class="dd-content">Item 6</div>
<div class="dd-handle fi fi-list"></div>
</li>
</ol>
</li>
<li class="dd-item dd-handle-custom" data-id="9">
<div class="dd-content">Item 9</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="10">
<div class="dd-content">Item 10</div>
<div class="dd-handle fi fi-list"></div>
</li>
</ol>
</li>
<li class="dd-item dd-handle-custom" data-id="11">
<div class="dd-content">Item 11</div>
<div class="dd-handle fi fi-list"></div>
</li>
<li class="dd-item dd-handle-custom" data-id="12">
<div class="dd-content">Item 12</div>
<div class="dd-handle fi fi-list"></div>
</li>
</ol>
<textarea class="form-control"></textarea>
</div>
Nestable Ajax
<!-- no handler -->
<div class="nestable dd"
data-nestable-max-depth="3"
data-update-delete-with-childs="false"
data-update-delete-with-childs-error="Please move or delete childs first!"
data-update-delete-params="['action','delete']['section','shop_category']"
data-update-delete-confirm-first="true"
data-update-delete-confirm-first="true"
data-ajax-confirm-type="danger"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-centered="false"
data-ajax-confirm-body="Are you sure? Delete this item?"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-yes-class="btn-sm btn-danger"
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-params="['action','reorder']['section','shop_category']"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center">
<ol class="dd-list">
<li class="dd-item dd-has-options" data-id="1">
<div class="dd-handle text-truncate">Item 1</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="2">
<div class="dd-handle text-truncate">Item 2</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
<ol class="dd-list">
<li class="dd-item dd-has-options" data-id="3">
<div class="dd-handle text-truncate">Item 3</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="4">
<div class="dd-handle text-truncate">Item 4</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="5">
<div class="dd-handle text-truncate">Item 5</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
<ol class="dd-list">
<li class="dd-item dd-has-options" data-id="6">
<div class="dd-handle text-truncate">Item 6</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="7">
<div class="dd-handle text-truncate">Item 7</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="8">
<div class="dd-handle text-truncate">Item 8</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
</ol>
</li>
<li class="dd-item dd-has-options" data-id="9">
<div class="dd-handle text-truncate">Item 9</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="10">
<div class="dd-handle text-truncate">Item 10</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
</ol>
</li>
<li class="dd-item dd-has-options" data-id="11">
<div class="dd-handle text-truncate">Item 11</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options" data-id="12">
<div class="dd-handle text-truncate">Item 12</div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
</ol>
</div>
<!-- width handler -->
<div class="nestable dd"
data-nestable-max-depth="3"
data-update-delete-with-childs="false"
data-update-delete-with-childs-error="Please move or delete childs first!"
data-update-delete-params="['action','delete']['section','shop_category']"
data-update-delete-confirm-first="true"
data-ajax-confirm-type="danger"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-centered="false"
data-ajax-confirm-body="Are you sure? Delete this item?"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-yes-class="btn-sm btn-danger"
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-params="['action','reorder']['section','shop_category']"
data-update-toast-success="Order Saved!"
data-update-toast-position="bottom-center">
<ol class="dd-list">
<li class="dd-item dd-has-options dd-handle-custom" data-id="1">
<div class="dd-content text-truncate">Item 1</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="../demo.files/php/demo.ajax_request.php" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="2">
<div class="dd-content text-truncate">Item 2</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
<ol class="dd-list">
<li class="dd-item dd-has-options dd-handle-custom" data-id="3">
<div class="dd-content text-truncate">Item 3</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="4">
<div class="dd-content text-truncate">Item 4</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="5">
<div class="dd-content text-truncate">Item 5</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
<ol class="dd-list">
<li class="dd-item dd-has-options dd-handle-custom" data-id="6">
<div class="dd-content text-truncate">Item 6</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="7">
<div class="dd-content text-truncate">Item 7</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="8">
<div class="dd-content text-truncate">Item 8</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
</ol>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="9">
<div class="dd-content text-truncate">Item 9</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="10">
<div class="dd-content text-truncate">Item 10</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
</ol>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="11">
<div class="dd-content text-truncate">Item 11</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
<li class="dd-item dd-has-options dd-handle-custom" data-id="12">
<div class="dd-content text-truncate">Item 12</div>
<div class="dd-handle fi fi-list"></div>
<div class="nestable-options">
<a href="#" class="nestable-edit js-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-pencil"></i>
</a>
<a href="#" class="nestable-del">
<i class="fi fi-thrash"></i>
</a>
</div>
</li>
</ol>
</div>