Drag & drop hierarchical list with mouse and touch compatibility
Is an old nestable plugin but is one of the most used. So Smarty extended it, ajax supported!
/*
:: Vendor Path
node_modules/nestable/
:: Installed
npm install nestable
:: SOW Controller Init
*/ $.SOW.vendor.nestable.init('.nestable')
<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>
<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>
<div class="nestable dd"
data-nestable-max-depth="3"
data-update-delete-with-childs="true"
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="top-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>
<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="top-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>
<!--
Smarty will send via Ajax two types of params:
1. serialized
2. array
'POST' method is used to send data!
Debug is on for this demo, so you can check the console
to see how data is sent on reorder and on delete/edit.
<!-- maximum allowed depth from 1 to unlimited -->
data-nestable-max-depth="3"
<!-- delete params -->
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"
<!--
Confirm before delete
SOW : Ajax Confirm plugin used
If missing, a classic confirm() is used.
Remove these params to not use the confirm.
-->
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"
<!--
ajax reorder url and params
Read about data-ajax-update-params
-->
data-ajax-update-url="../demo.files/php/demo.ajax_request.php"
data-ajax-update-params="['action','reorder']['section','shop_category']"
<!-- toast success message & position -->
data-update-toast-success="Order Saved!"
data-update-toast-position="top-center"
<!--
Ajax file used in this demo for edit:
_ajax/nestable_edit.html
-->
-->
<!--
Delete button example,
using external modal, loaded via ajax.
-->
<!-- delete -->
<a href="#" class="nestable-del nestable-ajax-modal"
data-href="_ajax/nestable_edit.html"
data-ajax-modal-size="modal-md"
data-ajax-modal-centered="false">
<i class="fi fi-thrash"></i>
</a>